前言
本笔记主要基于官方文档《迁移策略——Watch on Arrays》汇总而来。如有理解出入,请以官方文档为主。建议您以官方文档为主,本文为辅。这样您可以“以自己为主”审视的阅读,从而不被我的观点带偏。
知识储备:
概述
当侦听一个数组时,只有当数组被替换时才会触发回调。如果你需要在数组改变时触发回调,必须指定 deep
选项。
Vue 3.x 用法展示
在 Vue 3.x 当我们监听一个数组时,只有在数组被整体替换时才会触发回调。也就是说,如果我们只对数组进行增删改查操作时,是不会被 Vue 捕捉到的。如果想要在数组在发生改变时被 Vue 识别到,我们必须手动添加 deep
选项。如下:
watch: {
bookList: {
handler(val, oldVal) {
console.log('book list changed')
},
deep: true
},
}
Vue 2.x 的watch
其实,watch 的 deep
选项在 Vue 2.x 就有了。不过,在 Vue 2.x 只是用来处理对象的监听问题。设置 deep:true
后,Vue 就可以发现对象内部的数值变化。但是,在 Vue 2.x 中,监听数组并不需要这么做。
选项:deep
为了发现对象内部值的变化,可以在选项参数中指定
deep: true
。注意监听数组的变更不需要这么做。摘抄自——《Vue api —— vm.$watch》
我们都知道 JS 的数组是一种特殊的对象。可能 Vue 3.x 的这次变动是为了统一 Vue 的在监听对象处理吧!