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、（待續）