Vue watchEffect() 自动监听响应式引用

适用范围:

1. 场景:

• 监听渲染DOM所用到的响应式引用, 并及时重新渲染DOM

梗概:

• 自动监听回调函数中所用到的所有响应式引用, 并重新运行回调函数
• 在目标更新之后调用回调函数

语法:

1. 简单语法:

watchEffect(回调函数)

1.1. 返回值:

返回一个stop函数, 用来停止监听

示例

import { watchEffect, reactive } from 'vue'
 
const state = reactive({
  count: 0
})
 
watchEffect(() => {
  console.log('Count is:', state.count)
})
 
// Output: Count is: 0
 
state.count++
// Output: Count is: 1

在上面的示例中，我们使用watchEffect()来监听state.count的变化，并在控制台打印出新的值。每当state.count发生改变时，回调函数都会重新运行并打印出新的值。