一. 双向数据绑定原理
- 家喻户晓,vue 中 data 数据扭转,视图绝对应的数据也会扭转,实现了双向数据绑定。
- 其实 vue 次要通过 watch 监听事件,监听 data 中的属性,全副应用 object.defineProperty 办法中的 get 获取属性值办法和 set 设置属性值办法,当属性值扭转的时候,就会触发,而后 watch 就会触发,进而视图更新。
二.object.defineProperty() 办法
1. 官网原话:**Object.defineProperty()**
办法会间接在一个对象上定义一个新属性,或者批改一个对象的现有属性,并返回此对象。
意思就是他能够给一个对象增加属性,或者批改属性。
2.object.defineproperty(obj,attr,description) 蕴含三个参数,都是必须的;其中 obj 是对象,attr 是对象的属性,description 是属性的形容。
let a = 'hello'
let obj = {}
Object.defineProperty(obj,'name',{get:function(){return a},
set:function(v){console.log("我是 set 的数据")
return a = v
}
})
console.log(obj.name)//hello
obj.name = '66666'
console.log(obj.name)// 我是 set 的数据, 6666
阐明:代码高深莫测,间接打印就能获取属性值,当扭转之后,便执行 set 函数,而后将后果返回给 watch,进而触发双向数据绑定。