Vue数据响应式

尚硅谷Vue数据响应式原理。
这里只是根据视频和vue.js深入浅出做的笔记，大家要学的话建议去听尚硅谷的vue源码教程，多听几遍自然就懂了。

追踪变化

在javascript中有两种方法可以侦测到变化：Object.definePorperty 和 ES6 的proxy,这里介绍Object.defineProperty的方式。
这个方法会直接在一个对象上定义一个新属性，并返回此对象。

这里用函数封装，而不是直接用原函数，主要是在进行读取和改变值的时候，需要一个临时变量来保存修改的值，如下代码.

var temp;
Object.defineProperty(obj,'a',{
   
	get() {
   
		console.log('你试图访问obj的a属性');
		return temp;
	},

	set(newValue) {
   
		console.log('你试图改变obj的a属性',newValue);
		temp = newValue;
	}

})

即getter和setter需要变量周转，这里一起封装到一个函数中，利用闭包特性; val可以当做getter和set闭包中的环境, 从data中的key读取数据时，get函数触发，设置数据，set函数触发

function defineReactive(data, key, val) {
   
	var temp;
	Object.defineProperty(obj,'a',{
   
		get() {
   
			return val;
		},
	
		set(newValue) {
   
			if(val === newVal)
			val = newValue;
		}
	})
}

递归侦测对象的全部属性

接下来工作是把数据中所有属性都侦测到，所以要封装一个Observer类。这个类的作用是将一个正常的obj转换为每个层级的属性都是响应式的

var obj = {
   
	a:{
   
		m:{
   
			n:5
		}
	},
	b:4
}

observe函数, 判断value是否是对象。

export default function observe(value) {
   
	// 如果value不是对象，什么都不做
  if (typeof value !== "object") return;
  // 定义ob
  let ob;
  if (typeof value.__ob__ !== "undefined") {
   
    ob = value.__ob__; 
  } else {
   
    ob = new Observer(value);
  }
  return ob;
}
observe(obj)

def 用于给value添加__ob__属性

export const def = function (obj, key, value, enuertable) {
   
  Object.defineProperty(obj, key, {
   
    value,
    // 当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。
    enuertable,
    writable: true,
    // 当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
    configurable: true,
  });
}