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.自动创建代理和监听（如果没有创建过）
  3.触发 UI 更新（但并不会立刻更新）
  4.之后就可以正常操作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.数组长度一直增加，下标就是key
  2.长度都是未知的，总不能每次都用Vue.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自测题