Vue组合式API---watch()深度侦听

通过watch监听的ref对象默认是浅层监听的，直接修改嵌套的对象属性不会触发回调函数的执行。如果要想触发回调函数的执行，要开启深层监听，即watch()函数的第三个参数{ deep: true } 。

备注：开启深度监听以后，会递归遍历，有性能损耗，所以尽量不开启深度监听，而建议使用精确监听。

为了对比开启深层监听与不开启深层监听的区别，下面分两种情况：

示例：不开启深层监听

App.vue文件：

<script setup>
// 导入函数
import { ref, watch } from 'vue'

const state = ref({ count: 0 })
const changeStateByCount = () => {
  // 直接修改count
  state.value.count++
}


watch(state, () => {
  console.log('count变化了')
}, {
  // 不开启深度监听
  // deep: true
})

</script>

<template>
  <div>
    <p>count的值: {{ state.count }}</p>
    <button @click="changeStateByCount">点击修改count</button><br>
  </div>
</template>

将App.vue文件的内容粘贴到Vue SFC Playground

点击按钮，count的值变化了，但开发者工具的控制台并没有打印信息，说明没有触发watch的回调函数：

示例：开启深层监听

App.vue文件：

<script setup>
// 导入函数
import { ref, watch } from 'vue'

const state = ref({ count: 0 })
const changeStateByCount = () => {
  // 直接修改count
  state.value.count++
}


watch(state, () => {
  console.log('count变化了')
}, {
  // 开启深度监听
  deep: true
})

</script>

<template>
  <div>
    <p>count的值: {{ state.count }}</p>
    <button @click="changeStateByCount">点击修改count</button><br>
  </div>
</template>

将App.vue文件的内容粘贴到Vue SFC Playground

点击按钮3次，在开发者工具控制台打印了3次信息：