Vue源碼學習之Vue初始化

咱們常常經過這樣的方法建立一個Vue實例，定義該組件相關的dom結構(el),數據(data),方法(methods),組件(component)等等：

var vm = new Vue({
    el: '#example',
    data: { newTodoText: '',
            visitCount: 0,
            hideCompletedTodos: false,
            todos: [],
            },
    methods:{
        clickHandler:function(){
            console.log('你被點了！');
        }
    }
    created: function () {
        console.log('test');
    }
});

咱們經常知其然，而不知其因此然。今天咱們就來看看Vue的源碼是怎麼樣子的。如下是Vue的構造函數，主要是經過_init()方法將用戶定義的組件信息進行初始化。

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

initMixin(Vue); //初始化入口
stateMixin(Vue);//數據綁定
eventsMixin(Vue);//事件方法初始化
lifecycleMixin(Vue);//生命週期方法初始化
renderMixin(Vue);

initMixin(Vue)是Vue初始化的入口，主要經過調用_init()方法進行初始化，具體邏輯以下：

stateMixin(Vue)使用Object.defineProperty程序化的構建data和props對象，給她們添加了
get和set方法。同時暴露了$set，$delete，$watch三個方法。$watch就是觀察一個值的變化，
相似原生js裏onChange。

eventsMixin(Vue)定義了$on，$once，$off，$emit四個方法。$emit用於觸發自定義事件。

lifecycleMixin(Vue)定義了_update,$forceUpdate,$destroy三個方法。

renderMixin(Vue)渲染方法，用來生成render函數和vnode。