watch的deep用法

这个例子是关于Vue3中ref和watch的用法，特别是关于deep选项的说明。默认情况下，watch监听的ref对象是浅层监听的，直接修改嵌套对象的属性不会触发回调执行，需要开启deep选项。

首先，我需要理解ref和watch的基本用法。

在Vue3中，ref是用来创建响应式变量的。它可以让变量在数据变化时触发视图更新。

watch则是一个函数，用于监听一个变量的变化，并在变化时执行指定的回调函数。

在这个例子中，有以下代码：

const state = ref({ count: 0 })

watch(state, () => console.log('数据变化了'))

const changeStateByCount = () => {

// 直接修改属性 -> 不会触发回调

state.value.count++

}

首先，创建了一个ref对象state，初始值是一个对象{ count: 0 }。

然后，使用watch监听state，当state变化时，打印'数据变化了'。

接着，定义了一个函数changeStateByCount，用于修改state的count属性。

但是，注释中说直接修改属性不会触发回调，这意味着即使state.value.count++，watch也不会检测到变化。

这是因为watch默认是浅层监听，只检测对象本身的变更，不检测嵌套属性的变更。

所以，如果我想让watch检测到嵌套属性的变化，我需要开启deep选项。

我需要将watch的配置选项设置为{ deep: true }。

修改后的代码应该是：

const state = ref({ count: 0 })

watch(state, () => console.log('数据变化了'), { deep: true })

const changeStateByCount = () => {

state.value.count++

}

现在，当调用changeStateByCount函数时，state.value.count++会触发watch的回调，打印'数据变化了'。

为了验证这一点，我可以编写一个简单的示例。

首先，创建一个Vue3应用，使用ref和watch来监听state的变化。

在这个例子中，我创建了一个按钮，点击时调用changeState函数，增加state的count属性。

由于启用了deep选项，watch能够检测到state.value.count的变化，从而触发回调，打印'数据变化了'。

同时，由于state是响应式的，视图中的计数也会相应更新。

如果去掉deep选项，直接修改state.value.count++将不会触发watch的回调，也不会更新视图，因为watch只检测state本身的变更，不检测嵌套属性。

所以，deep选项在需要监听嵌套属性变化时是非常有用的。

总结一下，Vue3中watch的deep选项用于控制是否深监听，即是否监听嵌套属性的变化。默认情况下是不开启的，需要显式设置deep: true。

这样可以确保当嵌套属性发生变化时，watch能够检测到并执行相应的回调函数。

这个机制在处理复杂的数据结构时尤为重要，可以帮助我们更精细地控制响应式行为。