Vue监视数据

Vue监测data中的数据。

data中的每个属性都通过Object.defineProperty()指定一个getter和setter传给Vue的实例vm,，这是响应式的。

由于JS的限制，如果请求的操作是非响应式的，Vue就检测不到data中对象和数组数据的变化，也不会更新vm。

对象更新监测

通过settter监测数据改变时，对象中后续追加的属性，Vue默认不进行响应式处理。如果需要对后续追加属性做响应式处理，使用Vue.set()或vm.$set()。

Vue.set( target, propertyName/index, value )

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

vm.$set( target, propertyName/index, value )

• 参数：

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

注意！Vue不允许 Vue.set()和vm.$set()给vm或vm的根数据添加新的响应式属性！即不能是 Vue 实例，或者 Vue 实例的根数据对象。

数组更新监测

Vue对一些数组方法进行封装，这些API能够更新原数组，就能监测到数据改变，所以会触发视图更新，从而重新解析模板并更新页面。在Vue中需要监测到修改数组中某个元素时，考虑以下方法：

1. push()
2. pop()
3. shift()
4. unshift()
5. splice()
6. sort()
7. reverse()
8. 也可以使用Vue.set()或vm.$set()

像filter(),如果用到的数组方法并没有改变原数组，而是返回一个新数组，可以给原数组赋值为得到的新数组。