watchEffect是 Vue3 中提供的一个新特性，用于监听响应式数据的变化，并在数据发生变化时执行指定的回调函数。
与 Vue2 中的watch不同，watchEffect不需要指定要监听的数据，而是会自动追踪函数中使用的响应式数据，并在这些数据发生变化时重新执行回调函数。这种自动追踪的特性可以简化代码，并提高应用的性能。
下面是一个使用watchEffect的示例：
import { watchEffect, reactive } from 'vue' const state = reactive({ count: 0 }) watchEffect(() => { console.log(state.count) })
在上面的代码中，我们使用reactive函数创建了一个响应式对象state，并使用watchEffect监听了state.count属性的变化。当state.count发生变化时，回调函数会被重新执行。
需要注意的是，watchEffect返回一个无需停止的监听器函数。如果需要停止监听，可以调用这个监听器函数来停止监听。
除了监听响应式数据的变化外，watchEffect还支持在回调函数中访问组件的上下文，例如this关键字和组件的计算属性等。
下面是一个使用watchEffect访问组件计算属性的示例：
import { watchEffect, computed } from 'vue' export default { computed: { doubleCount () { return this.count * 2 } }, mounted () { watchEffect(() => { console.log(this.doubleCount) }) } }
在上面的代码中，我们使用computed函数创建了一个计算属性doubleCount，并在mounted钩子函数中使用watchEffect监听了doubleCount的变化。当doubleCount发生变化时，回调函数会被重新执行。
以上是Vue3中的watchEffect特性是什么的详细内容。更多信息请关注PHP中文网其他相关文章！