vue的变化侦测初了解

vue学习

Object.defineProperty

js中侦测变化的方法有两种，其一是es6的proxy（暂未学习到，日后补上），其二便是今天的介绍的Object.defineProperty，通过mdn文档介绍可知Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
他的参数有三个

参数	Value
obj	要定义属性的对象
prop	要定义或修改的属性的名称或 Symbol 。
descriptor	要定义或修改的属性描述符。

其中属性描述符有两种主要形式：数据描述符和存取描述符，他们共享以下几个属性configurable，enumerable，value，writable，get，set。

追踪变化

需要用到的是存取描述符，其中configurable和enumerable默认值为false，我们需要将其设置为true，configurable为true则监听对象里面key值对应的value可以修改且删除，enumerable为true则该值可以枚举。set和get对应的是函数，不传值则为undefined，追踪变化需要用到这两个函数，每当访问该对象的属性则会触发get函数，当对象的属性被修改时则会触发set函数该函数接受一个参数（赋予的新值）

封装函数

知道原理后追踪状态可以封装一个函数进行变化追踪

// 追踪变化
function reactive (data, key, val) {
	Object.defindeProperty(data, key, {
		enumerable:true,
		configurable: true,
		get: function() {
			return val
		},
		set: funtion() {
			if(val===newVal){
				return
			}
			val = newVal
		}
	}
}

只需要传入data，key和val就可以对data的key进行变化追踪了，读取data的key，get被触发，修改data的key，set触发

总结

这只是一个简单的状态追踪函数，实现了数据观察，和真正的vue的响应式原理还差很多，后续还需要将使用到数据的地方收集起来，当数据变化时，通知这些订阅者。这就是vue的(订阅/发布者模式)。