vue源码之init

vue 渐进式框架

import Vue from 'vue'

初次加载vue框架，对vue进行初始化。

...src/core/instance/init.js
export function initMixin(Vue){
	Vue.prototype._init=function(options){
		initState(vm)
		vm.$mount(vm.$mount.el)
	}
}
Vue.prototype.$mount = function(){...}

这个文件做了三件事：

1. 拿到用户传入的options并且作为私有变量挂载在vm实例上。
2. initState 唤醒钩子函数对本身定义的各项数据进行初始化，分门别类。
3. 定义$monut函数,并且找到$el进行挂载。

initState

src/state.js state.js中定义了init各种属性的方法，这个初始化的顺序不能更改。

• initProps
• initMethods
• initData
• initComputed
• initWatch

在这个文件中initData中牵扯到一个vue中的核心概念，对data数据进行数据劫持。 引入src/observe/index.js observe是一个单独的文件夹来做双向绑定这件事情。

class Observe {
	walk(data){
		keys.forEach(key=>{
			defineReactive(data,key,data[key])
		})
	}
}
//定义defineReactive函数来做数据劫持

function defineReactive(...){
	Onject.defineProperty(data,key,{
		get(value){return value},
		set(newValue){
			Observe(newValue)
			value = newValue
		}
	})
}

walk遍历递归-defineReactive劫持数据-在set中递归调用observe