vue 源码之双向绑定

vue 双向绑定

vue 双向绑定，问就是 Object.defineProperty 劫持数据获得状态变更，发布订阅者模式进行变更通知。好吧，现在地球人都知道这两句话了，要是别人再问你实现细节，我们应该如何回答呢。也是为了让自己更加了解，从自己大概知道和能与人清楚表达，这就是今天写文章的目的了。

阅读前，你需要具备 vue 生命周期，Object.defineProperty，以及发布订阅者模式（相关博客）的一些知识。

劫持数据

......
callHook(vm, 'beforeCreate')
initInjections(vm)  //注入 Data/prop 数据
initProvide(vm)		//注入完成
callHook(vm, 'created')

在进入 beforeCreate 周期后，会注入 data/prop 等数据，数据劫持就是发生在此时（initInjections 函数）。

function initInjections(){
   
	......
	Object.keys(result).forEach(key => {
   
		defineReactive(vm, key, result[key])
	})
}

export function defineReactive( obj: Object, key: string, val: any ......){
   
	......
	Object.defineProperty(obj, key, {
   
		get：function(){
   
			......
		}