【Vue原理】Vue源码阅读总结大会 - 序

写文章不容易，点个赞呗兄弟
专一 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工做原理，源码版助于了解内部详情，让咱们一块儿学习吧
研究基于 Vue版本 【2.5.17】

若是你以为排版难看，请点击 下面连接 或者 拉到 下面关注公众号也能够吧

【Vue原理】Vue源码阅读总结大会 - 序

阅读源码是须要不少的勇气的，特别是对这种 Vue 源码的框架，十分抽象，使用了好多设计模式，封装得十分精密。很难短期内能看得明白。

而我显然也是作好了内心准备 和 知识准备啦，我老早就想攻破 Vue 源码 这座城堡

可是显然我当时尚未作好准备，我认为本身不能够贸然去看，否则本身烦，本身累，还难以收获

本篇文章算是一个简单地吹水，就是跟你们谈谈个人感想，没有什么知识含量，其实也有的。

---

阅读源码准备了什么

一、掌握 Vue 全部API
我把 Vue 的全部 API 都详细研究使用过了一遍，并且尽可能在项目中都有使用，让本身有深一点的体会
并且我对着官方文档，一个个作了详细的笔记，并且联想过了使用场景。

二、JavaScript 扎实基础
幸亏本身以前花了大力气去给本身打基础，让本身如今的 JavaScript 基础还算不错。
逼着本身把不少本 JavaScript 书都看完了，而且作了详细笔记。像是【 JavaScript易维护】【JavaScript性能 】，【JavaScript 高级程序设计】【巴菲特给股东的信】看了两遍，说不上精通，也算是还能够？

三、看完 JavaScript 设计模式
光是 JavaScript 设计模式 这本书 我就看了一年半，不能说本身把全部设计模式都掌握了，掌握了大部分吧，设计模式港真真的颇有趣，否则我也不会决心学
在这里推荐 张容铭的 【JavaScript设计模式】，书讲得很是透彻和详细，我是从彻底不懂开始看的
也常用一部分，我一直以设计模式为个人项目基构。就是 能用设计模式的地方，我都尽可能使用设计模式。
设计模式看起来就像是 剑客 的剑谱，有招有式，连人家武侠剧发功的时候都知道 喊出 招式的名字... 降龙十八掌！！！！
野路子难登大雅之堂，主要是很差看啊，代码为了好维护，易扩展

四、学会调试
我很大胆地说，若是你不会调试，你看 Vue 源码，或者你会想死，你会出现这个场景...
MMP，这个方法是怎么跳到 那个方法的，那个方法和 这个方法又是怎么联系起来的？
也许你能够慢慢 使用 函数名字 去寻找，可是无疑你会多消耗几倍时间，并且你会更烦
使用调试真的方便，之前我也真的不喜欢调试，以为好像很难？？？
更喜欢使用 console.log 去打印信息.....
是啊，我本身写项目的时候，我仍是会使用 console.log 去调试.......
那是由于我本身代码，我知道怎么跑，你 看别人的代码，仍是超级抽象的框架，使用 console.log 的方式.....
放心，相信我，你会掉不少头发.........
这里，我使用的是 VSCode 去调试，真的简单又方便，我当时也真的很难去让本身又要学一个东西
可是我咬咬牙，我仍是学了，感谢本身......
我能够保证，你从不懂到掌握，只要不到十分钟，简直就是 现实版的 十分钟精通到入门
好吧，下面开始说，Vue 的简单总结。

---

Vue 源码的简短的总结

一、封装了不少经常使用的函数！

为了 复用 且 易维护
经常使用的类型判断、 类型转换 、数据格式转换（数组转对象）.....
举些例子

function isObject(obj) {    return obj !== null && typeof obj === 'object'}
function isUndef(v) {    return v === undefined || v === null}
function isDef(v) {    return v !== undefined && v !== null}
function toString(val) {    
    return val == null ?    '' :    
    typeof val === 'object' ?    
    JSON.stringify(val, null, 2) :    String(val)
}
function toObject(arr) {    
    var res = {};    
    for (var i = 0; i < arr.length; i++) {        
        if (arr[i]) {
            extend(res, arr[i]);
        }
    }    return res
}
....

你说说不定过了几年，判断是不是一个对象，再也不是 什么 typeof obj=="object"
若是没有封装，那岂不是全部代码涉及到的都要改一遍，且不说若是有不少个都变了.....那你就头大了

节点操做兼容函数
addClass ,removeClass，createElement，appendChild，removeChild

function addClass(el, cls) {    
    if (!cls || !(cls = cls.trim())) return
    if (el.classList) {        
        if (cls.indexOf(' ') > -1) {
            cls.split(/\s+/).forEach(function(c) { return el.classList.add(c); });
        } else {
            el.classList.add(cls);
        }

    } else {        
       var cur = " " + (el.getAttribute('class') || '') + " ";        
       if (cur.indexOf(' ' + cls + ' ') < 0) {
            el.setAttribute('class', (cur + cls).trim());
       }
    }
}
....

这些函数都颇有用，因此我都记下来了，毕竟是 框架封装的，确定是最完善的

function isObject(obj) {    return obj !== null && typeof obj === 'object'}
function isUndef(v) {    return v === undefined || v === null}
function isDef(v) {    return v !== undefined && v !== null}
function toString(val) {    
    return val == null ?    '' :    
    typeof val === 'object' ?    
    JSON.stringify(val, null, 2) :    String(val)
}
function toObject(arr) {    
    var res = {};    
    for (var i = 0; i < arr.length; i++) {        
        if (arr[i]) {
            extend(res, arr[i]);
        }
    }    return res
}

二、真的用了不少设计模式

就我看到的设计模式就有
观察者模式、状态模式、节流模式、 参与者模式、备忘录模式、单例模式 装饰者模式、组合继承模式、链模式.........
我怀疑 Vue 把全部的设计模式都用完了.... 真的..... 若是你不懂设计模式
你真不会领悟到他这么写的精髓
我就选 Vue 经常使用的一个设计模式来说

【参与者模式】

Vue 封装的不少函数都是用了 参与者模式，也能够叫作柯里化
先来简单解释下 参与者模式

一、保存第一次调用 传入参数
二、返回定制函数，函数内使用 参数
简单实现像这样

function add(a){    
    return function(b){ return a+b }
}
// 为了定制函数，把第一次调用时的参数闭包保存
add5 = add(5)var result  = add5(9)

看一下 Vue其中一个 使用柯里化 的封装函数
makeMap

建立 对象 map，返回函数，用于后面查找 某个东西是否存在 map 中

function makeMap( str,  expectsLowerCase ) {    
    var map = Object.create(null);   
    var list = str.split(',');    
    for (var i = 0; i < list.length; i++) {
        map[list[i]] = true;
    }    
    return expectsLowerCase ?        
        function(val) { return map[val.toLowerCase()]; } :        
        function(val) { return map[val]; }
}

// 应用
var isUnaryTag = makeMap(   
 'area,base,br,col,embed,frame,hr,img,input,isindex,keygen,' +  
 'link,meta,param,source,track,wbr');

// 查找 area 标签是否存在 上面保存过的 字符串中
isUnaryTag('area')

三、使用不少闭包！

据我看过的地方
一、解析组件模板 使用了闭包做为缓存，为了重复解析
二、cached 函数，一个专门使用闭包 为缓存的函数
三、上面所讲到 的 柯里化全部涉及的函数，makeMap,parthPath,
四、createPatchFunction 当属篇幅最大的使用闭包的函数了，把一堆函数做为闭包，而后返回 一个函数。他最大的做用是 比较更新DOM 节点

四、使用不少标志位
Vue 经常使用标志位来

一、代表是否已经作了某件事

_isMounted：// dom 是否已经挂载
_isDestroyed // 组件是否已经摧毁
pending //代表更新回调的 setTimeout 已经执行
waiting //是否已经初始化更新队列，在等待新的成员进入对垒
flushing //更新队列是否已经开始逐个更新成员
....

二、指明当前东西的身份

isStatic// 是不是静态节点
isComment// 是不是注释节点
isClone：// 是不是克隆节点
isOnce// 是否有v-once 指令（若是有当前指令，会跳过编译）
_isComponent// 是不是组件

多用标志位，控制流程，替代多余的判断（直接判断标志位来确认身份，不用作太多的判断），减小开销
上面那些变量，你们没看源码，可能有些懵逼，不要紧，就当先知道有这个东西就行了

---

Vue 源码分几步走

我给本身定的任务是 分为两个部分

Vue 的主体内容

一、依赖收集
二、依赖更新
三、Virtual DOM ，dom 节点 生成虚拟Vnode 节点
四、Compile， 模板编译
五、Diff、Patch， 节点比较更新
六、NextTick ，延迟执行回调
七、Render， 渲染机制
八、LifeCircle ，生命周期
九、Model ，双向绑定
十、Event ，事件机制

我就大约以这些为个人学习目标进行 源码阅读的，每一块都是一个很是大的内容，每一块内容都不是几天能看完的，有时候还须要一点灵感。固然还有不少内容，可是个人目标也并非所有，一字不漏读完，我要的是他的精髓便可，或许等我掌握了这些，再去开发其余的内容，这样或许更简单

反正我始终提醒本身不要焦躁，由于这个东西真的是急不来，长期以往，不要妄想一步登天，一开始总会很难，可是久了也同样很难，哈哈哈哈哈

若是你有兴趣也读源码，咱们能够一块儿讨论学习....