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的(订阅/发布者模式)。