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中需要监测到修改数组中某个元素时,考虑以下方法:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- 也可以使用Vue.set()或vm.$set()
像filter(),如果用到的数组方法并没有改变原数组,而是返回一个新数组,可以给原数组赋值为得到的新数组。