1.什么是数据响应式
在 Vue 中，当 data 中的数据发生改变时，视图会进行更新，这就是Vue数据响应式的概念。
接下来让我们理解一下更深层的原理
2.我们从一个小实验开始
通过代码示例，myData 中的 n 数据类型发生改变，一开始是 {n: 0} ，传给 new Vue 之后立刻变成 {n: (...)}，这是为什么呢 Vue对data做了什么呢？
3.get和set
get obj(){}，不加括号使用，读属性
set obj(){}，接受参数，写属性
let obj0 = {
姓: "高",
名: "圆圆",
age: 18
};
// 需求一，得到姓名
let obj1 = {
姓: "高",
名: "圆圆",
姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求一：" + obj1.姓名());
// 姓名后面的括号能删掉吗？不能，因为它是函数
// 怎么去掉括号？
// 需求二，姓名不要括号也能得出值
let obj2 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
age: 18
};
console.log("需求二：" + obj2.姓名);
// 总结：getter 就是这样用的。不加括号的函数，仅此而已。
// 需求三：姓名可以被写
let obj3 = {
姓: "高",
名: "圆圆",
get 姓名() {
return this.姓 + this.名;
},
set 姓名(xxx){
this.姓 = xxx[0]
this.名 = xxx.slice(1)
},
age: 18
};
obj3.姓名 = '高媛媛'
console.log(`需求三：姓 ${obj3.姓}，名 ${obj3.名}`)// 高 媛媛
// 总结：setter 就是这样用的。用 = xxx 触发 set 函数
4.Object.defineProperty()
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
const object1 = {};
Object.defineProperty(object1, 'property1', {
value: 42,
writable: false
});
object1.property1 = 77;
console.log(object1.property1);
5.vue的数据响应式
const vm = new Vue({
data:{n : 0}
})
1.new Vue内部对data对象进行监听，大概内容如下：
首先，new Vue用一个变量(变量名任意)例如'n'，' let _n = data.n' 保存data.n的值。
然后，通过Object.defineProperty给data对象一个虚拟的属性'n'，通过get/set方法模拟对'n'的读写操作同时覆盖原来的值，这样就保存了原始的值且不会被修改。
2.new Vue对data对象设置代理：
首先，设置一个空对象'const obj = {}'，
然后，通过Object.defineProperty给obj对象虚拟属性'n'，这里的get/set方法返回的值就是new Vue对data监听过的data.n，是我们需要获得的值。
最后，new Vue return值是一个对象：obj，即data对象的代理
3.const vm = new Vue(data:{n :0})，vm的地址就是obj的地址，vm.n ===data.n
vm不存在的时候用this等同。
总结：以上就是new Vue对data对象的监听和代理操作，当数据变化，vm就会调用render()函数，实时更新UI。
image.png
网友评论