Vue 3 迁移策略笔记—— 第29节：数组的监听

本文详细介绍了Vue3中数组监听的变化。与Vue2不同的是，Vue3中仅当数组被完全替换时，监听器才会触发。若要在数组发生变化时触发监听器，需显式设置deep选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本笔记主要基于官方文档《迁移策略——Watch on Arrays》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

知识储备：

《Vue api —— vm.$watch》

当侦听一个数组时，只有当数组被替换时才会触发回调。如果你需要在数组改变时触发回调，必须指定 deep 选项。

在 Vue 3.x 当我们监听一个数组时，只有在数组被整体替换时才会触发回调。也就是说，如果我们只对数组进行增删改查操作时，是不会被 Vue 捕捉到的。如果想要在数组在发生改变时被 Vue 识别到，我们必须手动添加 deep 选项。如下:

watch: {
  bookList: {
    handler(val, oldVal) {
      console.log('book list changed')
    },
    deep: true
  },
}

其实，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 的在监听对象处理吧！