6.26更新
watch监听对象中的属性变化
6.5更新
vue数据双向绑定
首先了解生命周期的大概(稍后补)
beforeCreated :
created:
beforeMounted:
mouted:
beforeDestory:
destoried:
beforeupdate:
update:
应该是这么几个
我们应该知道数据双向绑定会触发update这个钩子,只有在data发生变化的时候,才会触发这个钩子,从而更新模版数据。
但是只要data变化就可以触发了吗,不是这样的。
data的变化得需要是object.defineProperty的set函数来触发的,才能触发模版更新。
下面的例子,是个例外,数组的直接赋值没有触发set函数,导致,模版监听不到数据变化,更新不上去。
例子
desc:
期望:每次点击,将array[i]赋值点击相应的选项,判断array[i]是否与选项一致,一致,就做选中样式。你的答案也相应渲染array[i]。
结果:array数组内容发生变化,但是模板上一点变化也没有。没有样式,没有渲染答案。
object.defineProperty
研究过vue数据双向绑定的同学一定都知道object.defineProperty
Object.defineProperty(obj, prop, descriptor)
obj:必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性
必需。目标对象
prop:必需。需定义或修改的属性的名字
descriptor:必需。目标属性所拥有的特性
方便理解,粘贴一段以前写的数据劫持的代码
watch的监听机制是依赖于vue的$set方法的
var defineGetAndSet = function (obj, propName) {
try{
Object.defineProperty(obj, propName, {
get: function () {
return bValue
},
set: function (newValue) {
bValue = newValue;
scan()
},
enumerable: true,
configurable: true
});
}catch (error) {
console.log(error)
}
}
obj.a = ‘aaa’ 这样是会触发set方法的,
但是,点对象赋值法,array[index] = ‘data',这样对数组的赋值
在模板中是无法监听到数组的变化的,但是数组他也确实是变化了
这个时候我们需要手动set
vue.set(target,key,value)
这样一来就能实现最上面的数组动态渲染到模板上了