import Vue from 'vue'過程中，Vue 初始化主要就幹了幾件事情，合併配置，初始化生命週期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 等等。目前主要注意一下initMixin方法
initMixin()
有刪減，目前主要看主線，其他的功能逐步拆開來分析
function initMixin (Vue) {
Vue.prototype._init = function (options) { // 在Vue的原型上定義 _init 方法
var vm = this;
vm._self = vm;
initLifecycle(vm); // 初始化生命週期
initEvents(vm); // 事件
initRender(vm); // render 方法
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm); // 初始化狀態
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
if (vm.$options.el) { // 掛載dom元素
vm.$mount(vm.$options.el);
}
};
}
複製程式碼
new Vue()
通過initMixin方法之後，執行 new Vue() 操作，在 Vue建構函式內部，呼叫了vm原型上的 _init()方法，在this._init()方法中我們目前主要關注的是 initState()方法
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options); // 這是在Vue原型上定義了的方法(initMixin方法中)，使構建出來的Vue例項呼叫
}
new Vue({
el: '#app',
render: h => h(App)
})
複製程式碼
initState()
我們深入到 initData 方法中
function initState (vm) {
vm._watchers = [];
var opts = vm.$options;
if (opts.props) { initProps(vm, opts.props); }
if (opts.methods) { initMethods(vm, opts.methods); }
if (opts.data) {
initData(vm); // 初始化資料，並且做資料代理
} else {
observe(vm._data = {}, true /* asRootData */);
}
if (opts.computed) { initComputed(vm, opts.computed); }
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch);
}
}
複製程式碼
initData()
在這個方法中，需要注意的是 proxy() 方法
function initData (vm) {
var data = vm.$options.data;
data = vm._data = typeof data === 'function' // 在vm 上定義一個 '_data' 屬性
? getData(data, vm) // getData()方法返回的就是我們在vue data()方法中定義了的屬性和方法
: data || {};
if (!isPlainObject(data)) {
data = {};
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
);
}
// proxy data on instance
var keys = Object.keys(data);
var props = vm.$options.props;
var methods = vm.$options.methods;
var i = keys.length;
while (i--) {
var key = keys[i];
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
("Method \"" + key + "\" has already been defined as a data property."),
vm
);
}
}
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
"The data property \"" + key + "\" is already declared as a prop. " +
"Use prop default value instead.",
vm
);
} elseif (!isReserved(key)) {
proxy(vm, "_data", key); // 資料代理
}
}
// observe data
observe(data, true /* asRootData */);
}
複製程式碼