双向数据绑定的原理
首先我们来理解一下什么是双向,如下图所示,当服务端中的数据发生改变,也就是data(Model)发生改变,View就会发生改变,这是正向的。当View层有数据发生改变的时候,那就触发相应的data(Model)层改变,这是反向的。那么这就是双向的。
那么他们是怎么做到view层改变data就改变的,data改变View就改变的呢,这中间其实就是view-modle层来进行监控处理的。主要用的是es5中的Object.defineProperty的API来监听数据的变化,从而刷新视图。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
其中有两个属性,get和set属性,get是用户读取数据的时候触发,set是数据改变或设置时触发,当数据发生改变的时候就会自动触发set方法,该方法接受唯一的参数,即改变后的数据。
Object.defineProperty() 的语法
Object.defineProperty(obj, prop, descriptor)
/**
* obj:要在其上定义属性的对象。
* prop:要定义或修改的属性的名称。
* descriptor:将被定义或修改的属性描述符。
**/
例如想要更改一个对象的属性值,如下
var vm = {}
var data = {
name: '哈哈哈'
}
Object.defineProperty(vm, 'name', {
get: function () {
console.log('get', data.name) // 监听
return data.name
},
set: function (newVal) {
console.log('set', newVal) // 监听
return data.name = newVal
}
})
object.defineProperty与reflect.defineProperty的区别
前者是返回一个新对象,是ES5的API,后者是返回一个布尔值,ES6的API,那后面的话object里的方法会慢慢迁移到reflect中。