对Vue数据响应式的理解

当一个物体能够对外界刺激作出反应，那么它就是响应式的。

示意图如下：

将vm.n的值改变，那么UI(data)中的n就会来响应

当把一个JS对象传入Vue实例作为data选项，Vue将遍历此对象所有的property，并且使用Object.defineProperty，把这些property转为getter和setter，etter和setter对用户是不可见的。

Vue无法检测property的添加或者删除,Vue在初始化实例时对property执行getter/setter转化，所以property必须在data对象上存在才能让vue转化为响应式。如下：

var vm = new Vue(data:{n:0}) // vm.n是响应式的

对已经创建的响应式，Vue不允许添加根级别的property。但是，可以通过Vue.set(object,key,value)或vm.$set(object,key,value)方法来添加响应式property.

vue在直接修改数组长度或直接设置一个数组项时不能检测到数组的变动

var vm = new Vue({
   data:{
     items: {'a','b','c'}
    }
})
vm.items[1] = 'x' // 不是响应
vm.items.length = 2 // 不是响应

对数组项，可以使用以下方法实现在响应式系统内更新

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// vm.$set
vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1 ,newValue)

对数组长度，可以使用splice

vm.items.splice(newLength)