Vue数据响应式

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