理解Vue数据响应式

Vue可以监听和代理属性，Vue的data是响应式，比如const vm = new Vue({data:{n:0}})，如果vm.n被修改，视图中的n就会响应改变，调用render(data)。

Vue2通过Object.defineProperty来实现数据响应式，但存在bug，如果没有提前声明属性，Vue就不能监听和代理，修改属性值就不会在视图响应。

解决办法有两种，一是提前声明key，后面再添加属性。

new Vue ({
    data:{
        obj:{
            a:0,
            b:undefined // 提前声明key
        }
    },
    template:`
    {{obj.b}}
    `,
})

第二种是使用Vue.set或者this.$set，它可以新增key，自动创建代理和监听，并触发UI更新（但不会立刻更新）。

new Vue ({
    data:{
        obj:{
            a:0,
        }
    },
    template:`
    {{obj.b}}
    <button @click="setB">set B</button>
    `,
    methods:{
        setB(){
            Vue.set(this.obj,'b',1)
            this.$set(this.obj,'b',1)
        }
    }

如果data中有数组，不便于提前声明变量，可以使用7个API来新增数组key，它们会自动处理监听和代理，并更新UI。也可以用set来新增key，更新UI，但不会创建监听和代理。