Vue源码解读

1、版本说明

• 一、npm i vue -S 获得最新版本的 vue（v2.6.8）
• 二、以下图，找到dist里面的vue.js便可

2、原型与原型链

一、实例的属性和方法（下图）

二、原型上的属性和方法（下图）

三、原型链（下图）

上图有误，后续修正

const vm = new Vue()以后有：

vm.__proto__ === Vue.prototype
vm.__proto__.__proto__ === Object.prototype
vm.__proto__.__proto__.__proto__===null

Vue.__proto__ === Function.prototype
Vue.__proto__.__proto__ === Object.prototype
Vue.__proto__.__proto__.__proto__===null

复制代码

3、Vue是如何执行的？

3-一、Vue的初始化过程

查看vue的源码，实例化以后会执行原型链上的__init方法，该方法执行了一系列初始化动做：

function Vue(options) {
    if (!(this instanceof Vue)) {
        warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
}

Vue.prototype._init = function (options) {
    initLifecycle(vm); // 把一些全局的属性绑定到vm里面
    initEvents(vm); // 把一些全局的事件绑定到vm里面
    initRender(vm); // 渲染初始化，createElement()绑定等
    callHook(vm, 'beforeCreate');
    initInjections(vm); // resolve injections before data/props
    initState(vm); // 把vm的属性和方法初始化，包括props、data、methods、钩子函数等全部属性，并完成对data的数据劫持及加入观察者
    initProvide(vm); // resolve provide after data/props
    callHook(vm, 'created');
    
    //判断是否有el，有则执行$mount(),没有的话什么都不作
    if (vm.$options.el) { 
        vm.$mount(vm.$options.el);
    }
}

复制代码

能够看到初始化动做作了不少事情，这也是为何说vue初始化的时候比react慢。

3-二、初始化以后又作了什么？

3-2-一、看源码，初始后以后开始 mountComponent()

Vue.prototype.$mount = function (el, hydrating) {
    el = el && inBrowser ? query(el) : undefined;
    return mountComponent(this, el, hydrating)
};
复制代码

3-2-二、mountComponent() 主要作了4件事

• 一、执行 beforeMount 钩子
• 二、执行原型链上的 _render()、_update() 2个函数
• 三、设置Watch，如有更新，则执行 beforeUpdate 钩子
• 四、执行 mounted 钩子

callHook(vm, 'beforeMount');

vm._update(vm._render())

new Watcher(vm, updateComponent, noop, {
    before: function before() {
        if (vm._isMounted && !vm._isDestroyed) {
            callHook(vm, 'beforeUpdate');
        }
    }
}, true /* isRenderWatcher */);

if (vm.$vnode == null) {
    vm._isMounted = true;
    callHook(vm, 'mounted');
}
复制代码

3-2-三、_render()一点说明（作了啥？）

vm._render() --> vm.$createElement() --> createElement()
--> createComponent() --> installComponents()
--> componentVNodeHooks{
    init(){},
    prepatch(){},
    insert(){-->callHook(vm, 'mounted')},
    destroy(){}
}
复制代码

4、（待续）