深入响应式原理

Vue 最显著的特性之一是响应式系统（reativity system）。

模型层（model）只是普通的JavaScript 对象，修改它则更新视图（view）。

每个组件实例都有相应的watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的setter 被调用时，会通知watcher 重新计算，从而致使它关联的组件得以更新。

注：Vue 不支持IE8 以及更低版本浏览器

变化检测问题

Vue 不能检测到对象属性和添加或删除。

由于Vue 会在初始化实例时对属性执行getter／setter 转化过程，所以属性必须在data 对象上存在才能让Vue 转化它。这样才能让它是相应的。

    <script>
        var vm= new Vue({
            data:{
                a:1
            }
        })
        // vm.a 是响应的
        vm.b=2
        //vm.b 是非相应的
    </script>

Vue 不允许在已创建的实例上动态添加新的根级响应式属性(root-level reactive property)。

然而使用Vue.set(object, key, value) 方法将相应属性添加到嵌套对象上。

      var vm=new Vue({
          el:'#example',
          data:{
              a:'b',
              b:[1,'b',3,4]
          }
      })
      Vue.set(vm.b,1,10)
      vm.$set(vm.b,5,11)