一、什么是数据代理
通过一个对象，代理对另一个对象data中属性的操作（读/写）。目的是为了更方便操作data中的数据
二、语法：
Object.defineProperty(obj, prop, descriptor)
* 第一个参数 obj，表示被添加（特性）的对象
* 第二个参数 prop，表示添加的属性
* 第三个参数 descriptor，表示要定义或修改的属性值
Object.defineProperty（）可以为对象的属性添加特性，每一个被添加过的属性，都会拥有属于自己的getter和setter。 正是有了getter和setter，可以实现数据驱动视图，数据实时绑定的效果。
不懂Object.defineProperty()访问如下链接
三、数据代理示例：
let obj1 = { name: "kubo" };
let obj2 = { age: 20 };
// 为obj2添加新特性name
Object.defineProperty(obj2, "name", {
// 当obj2的name值被读取时,调用get函数
get() {
// 返回obj1的数据
return obj1.name;
},
// 当obj2的name值被修改时,调用set函数
set(value) {
obj1.name = value;
},
});
四、Vue中数据代理的基本原理
看下面代码
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>名字：{{name}}</h2>
<h2>地址：{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#root',
data: {
name: '张三',
address: '北京'
}
})
console.log(vm);
</script>
image.png
我们发现vm实例上就有了address，name这两个属性，我们思考一件很关键的事情，这两个属性，是怎么加上去的
4.1、数据代理的基本原理
1、通过Object.defineProperty方法，将data对象中所有的属性添加到vm上
2、为每一个添加到vm上的属性，都配置setter和getter等响应式操作，实现对对象里面属性监视
3、在setter/getter内部操作data中对应的属性。（ 这样改了属性就会引起对应的setter调用，会重新解析模板）
4、 模板重新解析的时候，会重新生成虚拟Dom,新旧DOM对比，重新渲染页面
4.2、Vue中数据代理过程
1、实例化vue后，得到实例对象vm。
2、将options配置项目里的data数据存储一份至vm的_data
(至此，vm自身还没有data里的数据，但是可以通过vm._data获取到)
3、（开始代理）vm利用Object.defineProperty方法开始为自身添加_data中的属性。
属性值是通过getter读取到_data中对应的属性值。
赋值
//options就是new Vue时传入配置项
vm._data = options.data
数据代理
Object.defineProperty(vm,'name',{
get(){
return vm._data.name
},
set(newval){
vm._data.name = newval
}
})
五、数据代理的作用
5.1、简化代码
假设我们没有数据代理，我们在使用插值语句的时候使用了{{_data.xxxx}}这样就增加了代码量，也非常的不方便
把_data中的属性通过Object.defineProperty方法一条一条的绑定到vm实例上面，访问vm上面的属性就可以直接访问_data中的属性，在差值语法中可以直接{{xxxxx}}
5.2、实现双向绑定
在Vue中当我们修改了通过defineProperty方法添加到vm实例上面的属性，会触发set函数
set函数做的第一件事就是赋值
set(newval){
vm._data.name = newval
}
set还做了第二件事
作为发布者发出通知：“我是属性 xxx，我变了”。文本节点则是作为订阅者，在收到消息后执行相应的更新操作。 mvvm
发出通知 dep.notify() => 触发订阅者的 update 方法 => 更新视图。
网友评论