《Vue 数据响应式》

什么是vue数据响应式

数据改变，UI页面做出响应。

Vue 的 data 是响应式

const vm = new Vue({
    data:{n:0}
})

当修改 vm.n，UI 页面中的 n 会做出响应，Vue 2 是通过Object.defineProperty来实现数据响应的。

1. 声明一个对象时，通过 getter 和 setter 设置对象属性实现数据响应

getter/setter 用于对属性的读写进行监控

Vue 中，用于设置 data 中的新增的 key 的 API 是Vue.set,vm.$set

getter/setter 只能在声明的时候写

举例：

//修改姓名
let obj = {
  姓: "r",
  名: "y",
  age: 18,
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx) {
    //设置姓名为obj.姓名
    this.姓 = xxx[0];
    this.名 = xxx.substring(1);
  }
};
obj.姓名 = "周杰伦";
console.log(`姓名：${obj.姓}${obj.名}`);

consle.log(obj)，为什么会打印出 姓名:(...)

结论：get set 给 obj 添加并设置了一个 虚拟属性 姓名，浏览器打印出 姓名:(...) 表示可以对 姓名 进行读和写。

2. 通过 Object.defineProperty(obj, prop, descriptor) 给已经声明过的对象添加属性

• obj: 要定义属性的对象。
• prop: 要定义或修改的属性的名称。
• descriptor: 要定义或修改的属性描述符。

var _xxx = 0

Object.defineProperty(obj, 'xxx', {
  get(){
    return _xxx
  },
  set(value){
    _xxx = value
  }
})

Object.defineProperty给 obj 添加了一个 虚拟属性 xxx，它有一个 get 和 set，get 的时候， xxx 不是真实存在的，所以用_xxx 来存放 xxx 的值的，set 的时候，也是把新值 value 赋值给 _xxx。

可以看看这个的案例

此时可以得出结论，const vm = new Vue({data: mayData}) ，

• vue 会让 vm 成为 myData 的代理。
• vue 会让 mydata 的所有属性进行监控。

为什么要监控？为了防止 mydata 的属性变了，vm 却不知道，vm 知道属性变了就可以调用 render(data) 了。

Vue 的 data 是响应式

const vm = new Vue({data:{n:0}})

• 如果修改 vm.n，那么 UI 中的 n 就是响应我
• Vue 2 通过 Object.defineProperty 来实现数据响应式

tips：

1. 在声明对象的时候就把 key 也声明好，后面不要再加属性。
2. 如果要给声明好的对象加属性，请用 Vue.set 或 this.$set。

如果 data 中有数组

因为数组本身的特殊性，数组的长度无法预测（比如所有用户的用户名，存在数组中），你无法使用 undefined 去为每一项占位，或一直使用 Vue.set( ) 方法。

• 你可以使用this.array.push('value')，但其实数组已经被 Vue 包装了新的 push 方法。 一共有 7 个 API。 这些方法 (API) 会自动处理对数组该项的监听和代理，并触发视图更新。

7 个 API

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()