《Vue 数据响应式》

1. 数据响应式

数据响应式：数据发生改变，视图会重新渲染。

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

修改Vue实例的data后，UI的data重新渲染，这就是Vue数据响应式。

2. Object.defineProperty

对象声明后，可以使用Object.defineProperty()方法，给对象额外添加属性(虚拟属性)，添加getter和setter用于对属性进行读写。

Object.defineProperty(obj,n,{
    get(){},
    set(value){}
})

有这个n才能监听和代理obj.n

如果没有 可以使用Vue.set或者this.$set 这两个东西可以新增key并且创建代理(如果没创建过)和监听，还可以触发UI更新.

this.$set(this.object,'m',100)

3. proxy代理（设计模式)

vm就是myData的代理 vm负责对myData的操作和属性的监控

const vm = new Vue({data:myData})

vm发现myData的属性变化了，就可以调用render(data)重新渲染

4. 对象和数组新增key

对象新增key：

• Vue不能提前监听和代理，需要使用set新增key，创建监听和代理，更新UI。
• 最好还是先把属性写出来，不要去新增key

数组新增key

• set可以新增key，但不会创建监听和代理。

• this.$set 作用于数组时，并不会自动添加监听和代理。

• 使用 Vue 提供的数组变异 API 时，会自动添加监听和代理。

• Vue的以下7个API提供了对数组的增删操作，并且会自动处理监听和代理，更新UI。

  pop push reverse shift sort splice unshift

数组新增key推荐使用这7个API。