0-4 Vue：数据响应式（响应式、set、篡改API）

1.什么是响应式

• 若物体能对外界的刺激作出反应，它就是响应式的

2.Vue的data是响应式

• const vm = new Vue({data:{n:0}})
• 如果修改 vm.n，那么UI中的n就会来响应我
• Vue2通过 Object.defineProperty来实现数据响应式

3.响应式网页

• 如果改变窗口大小，网页内容就会做出响应，那就是响应式网页

4.Vue的data有bug

• Object.defineProperty 的问题
  1.Object.defineProperty(obj,'n',{...})
  2.必须要有一个’n’才能监听&代理 obj.n
  3.如果：一开始data中没有给n怎么办？
  案例一：Vue会给出警告，n不存在却引用了
  案例二：Vue只会检查第一层属性，data中只有obj.a，但引用的确实obj.b，Vue检查不出来
  结论：Vue没办法监听一开始不存在的元素，就算后面再进行赋值操作，也不会出现在页面中，因为根本监听不到
• 解决办法
  一、提前把key都声明好，即使一开始不想给值，也要给undefined
  二、使用Vue.set 或者 this.$set
• Vue.set 或者 this.$set
  1.新增key
  2.自动创建代理和监听（以前没有，告诉Vue要监听这个key）
  3.触发 UI 更新（但并不会立刻更新）
  ——因为从 undefined 到 value
  4.set之后就可以正常操作b了

new Vue({
  data:{
    obj:{
      a:0
    }
  },
  template:`
    <div>
      {{obj.b}}
      <button @click="setB">set b</button>
    </div>
  `
  methods:{
   setB(){
     Vue.set(this.obj,'b',1)
     //等价于 :this.$set(this.obj,'b',1)
   }
  }
}).$mount("#app")

5.data中有数组怎么办？

• 没办法提前声明所有key
  1.想要往数组中添加新的值
  2.数组长度都是未知的，不能全部提前声明
  3.可以使用Vue.set来新增key，但set作用于数组时不会自动添加监听和代理
• 解决
  使用push函数（尤雨溪篡改过的API）
  1.把数组array传给Vue之后，Vue就会篡改这个数组
  2.它会在中间加一层原型，原型中有7个被篡改过的API
  3.会帮你set：也就是说新push会调用以前的push，然后通知Vue添加监听和代理
  4.调用之后会自动更新UI
  
• API篡改思路（只是思路，不是真的原型）
  继承：就是把原型链放到Array前面

class VueArray extends Array{
    push(...args){//可以一次push多个
        const oldLength = this.length //this 当前数组
        super.push(...args)
        this.length
        for(let i=oldLength;i<this.length;i++){
            Vue.set(this,i,this[i])//对每一个push的都添加监听和代理
        }
    }
}

const a = new VueArray(1,2,3,4)
a.push(5,6,7,8)
console.log(a)

6.总结

• 对象中新增的key
  1.Vue没有办法事先监听和代理
  2.要使用 set 来新增 key，创建监听和代理，更新UI
  3.最好提前把属性都写出来，不要新增key
  4.数组做不到 [不新增key]
• 数字中新增的key
  1.也可以用set来新增key，更新UI，但这个方面无法添加监听和代理
  2.不过尤雨溪篡改了7个API更方面对数组的删增（更优）
  3.这7个API会自动处理监听和代理，并更新UI
• Vue自测题