响应式是什么

响应式就是当有一个条件（情况）发生，会做出相应的动作（反应）

在Vue中，数据响应的表现就是当vm实例中的data变化时，页面也会更新

Vue响应式

• Vue会把vm实例中的data中的所有数据遍历一遍，都使用Object.defineProperty把这些数据（属性）全部转化成getter/setter，这样一来就可以监控这些属性的变化，并做相应操作
• Vue的操作是当属性被修改时，调用render
• Vue只会遍历data的第一层数据，如果调用了没有被声明的属性，Vue就会发出警告
• 但是如果调用了第二层的没有被声明的属性，Vue不会发出警告

let vm = new Vue({
    data:{
        a:1,
        b:{
            c:3,
        }
    }
})

vm.a //响应式的
vm.b.c // 响应式的
vm.e // Vue会发出警告
vm.b.d // Vue不会发出警告
vm.f = 2 //f不是响应式的

也就是说：只有一开始就声明了的变量，才是默认可以有响应式的

如何添加响应式数据？

方法一：

Vue.set(vm.someObject,'f',2)
//Vue.set(Vue实例,变量名，变量值)

方法二：

vm.$set(vm.someObject,'f',2)
this.$set(this.someObject,'f',2)

两个方法等价，$set是Vue.set的别名

数组 如何添加响应式的数据？

方法一：同普通变量一样进行添加

方法二：尤大通过改写了Array中的push方法（变异方法），可以使用push方法在数组中添加数据，并且同时这个数据是响应式的。

拓展：同时变异的方法有 push，pop，shift，unshift，sort，reverse，splice