精确侦听对象的某个属性

这个需求是使用Vue3的响应式系统来监听一个对象的特定属性变化，具体来说是监听一个名为info的Ref对象中的age属性，当age发生变化时，执行一个回调函数来记录这个变化。

首先，需要理解Vue3中的响应式系统，特别是ref和watch的用法。

在Vue3中，ref是用来标记一个变量为响应式的，这样在变量发生变化时，依赖这个变量的组件会重新渲染。

watch则是一个函数，用于监听一个或多个响应式变量的变化，并在变化发生时执行指定的回调函数。

在这个需求中，我们有以下几点需要实现：

1. 创建一个ref对象，包含name和age两个属性。

2. 使用watch来监听这个ref对象的age属性，当age发生变化时，执行一个回调函数，打印一条消息到控制台。

首先，来看一下代码示例：

const info = ref({

name: 'cp',

age: 18

})

watch(

() => info.value.age,

(newVal, oldVal) => {

console.log('age发生变化了', newVal, oldVal)

}

)

这里，我们首先创建了一个ref对象，包含name和age两个属性，初始值分别是'cp'和18。

然后，使用watch来监听info.value.age的变化。

watch的第一个参数是一个getter函数，用于获取要监听的值。在这个例子中，getter函数返回info.value.age。

第二个参数是一个回调函数，当getter函数的返回值发生变化时，这个回调函数会被执行。在这个回调函数中，我们可以执行任何需要的操作，比如记录变化的日志，更新UI等。

在这个例子中，回调函数使用了console.log来打印一条消息，表明age属性发生了变化，并且打印出新的值和旧的值。

需要注意的是，watch默认是深度监听的，也就是说，如果info对象内部的属性发生变化，watch也会触发。但是在这个需求中，明确要求不开启deep的前提下，只监听age属性的变化。

不过，实际上，watch在Vue3中默认就是深度监听的，所以不需要额外开启deep选项。

但是，如果info对象内部还有嵌套的对象，可能需要更精细地控制监听的范围。

在这个例子中，info对象只有一个age属性，所以直接监听info.value.age是没有问题的。

另外，如果需要监听多个属性，或者更复杂的逻辑，可能需要使用watchEffect或者其他的响应式API。

总的来说，这个例子展示了如何使用Vue3的ref和watch来精确地监听一个对象的特定属性变化，这对于在不使用deep的情况下，只关注特定属性的变化是非常有用的。

在实际开发中，这种精确的监听可以提高性能，避免不必要的计算和渲染，特别是在处理大型应用或者高性能要求的场景下。

最后，为了更好地理解这个例子，可以尝试修改info.value.age的值，然后观察控制台的输出，看看是否能够正确地捕获age属性的变化。

例如，可以这样修改age的值：

info.value.age = 20

然后，控制台应该会输出：

age发生变化了 20 18

这表明，age从18变为了20，watch成功地捕获了这个变化，并执行了回调函数。

总之，这个例子是一个很好的实践，展示了Vue3响应式系统的强大和灵活性，帮助开发者更高效地管理应用的状态和逻辑。

总结

这个需求是使用Vue3的ref和watch来精确监听一个对象的特定属性变化，具体来说是监听info对象的age属性，当age发生变化时，执行一个回调函数来记录这个变化。

通过这个例子，可以了解到：

• ref用于创建响应式变量。

• watch用于监听响应式变量的变化，并执行相应的回调函数。

• watch默认是深度监听的，不需要额外设置deep选项。

• 可以通过指定getter函数来精确监听特定属性的变化。

这个例子对于理解Vue3的响应式系统和状态管理非常有帮助，可以帮助开发者更高效地开发应用。

代码示例

const info = ref({

name: 'cp',

age: 18

})

watch(

() => info.value.age,

(newVal, oldVal) => {

console.log('age发生变化了', newVal, oldVal)

}

)

测试

• 修改age的值：

info.value.age = 20

• 控制台输出：

age发生变化了 20 18