深入响应式原理

在使用vue的场景中，一个JavaSript对象传入Vue实例中当作data数据选项的时候，Vue实例会遍历对象的所有property，并且使用Object.defineproperty,将其转化成getter/setter。getter/setter是对用户来说是不可见的，然后就是每个组件都会对应一个watcher实例，当其发生改变的时候，会通知watcher重新渲染

1、对于对象

var vm = new Vue({
    data:{
        a:1//是响应式的
    }
})

vm.b = 2//非响应式的

也就说明其响应式是在vue实例创建的时候，就已经执行Object.defineproperty，其后面添加的属性是没有执行其Object.defineproperty。

2、对于数组

1）当你利用索引直接设置一个数组项时
2）当你修改数组的长度时

解决方法

强制刷新

利用v-if或者v-show

利用组件的forceUpdate方法