以下内容来自英文版官方文档:https://vuejs.org/v2/guide/list.html#Array-Change-Detection(但怎么说呢 英文其实比中文更深究一点emmm 饿 其实中文也有 在https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95 但是开始没找到)
1.对于更改了原数组的方法,例如
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
vue是进行了监听的重写所以可以知道数组的变更。
2.对于返回新数组的:例如 filter()
、concat()
和 slice()
(其实还有map这种,简称f smc)vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。
3.Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data
对象上存在才能让 Vue 将它转换为响应式的。
在data之外定义是不行的。
4.
Vue 不能检测以下数组的变动:
- 当你利用索引直接设置一个数组项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
以下两种方式都可以实现和 vm.items[indexOfItem] = newValue
相同的效果,同时也将在响应式系统内触发状态更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
回想一下splice(斯普莱斯): 数组在前,参数是下标,删除1,新增加的那个数组
也可以使用vm.$set
实例方法,该方法是全局方法 Vue.set
的一个别名:
可以使用this.$set(数组,id,值)来监听
5.Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作
也就是说不是实时而是异步的,有一定的延迟,如果用nexttick就能马上执行了
因为 $nextTick()
返回一个 Promise
对象,所以你可以使用新的 ES2017 async/await 语法完成相同的事情:
methods: {
updateMessage: async function () {
this.message = '已更新'
console.log(this.$el.textContent) // => '未更新'
await this.$nextTick()
console.log(this.$el.textContent) // => '已更新'
}
}
响应式这节课:https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 (真不戳)