在vue中，$watcheffect是一个用于监听响应式数据改变的api，并且可以自动收集依赖，无需手动指定要监听的数据。在vue 3中，$watcheffect取代了vue 2中的$watch方法，成为了更加便捷和高效的响应式数据监听方式。下面将介绍如何在vue中使用$watcheffect实现自动收集依赖。
- 创建Vue实例
首先，我们需要创建一个Vue实例。可以通过Vue.createApp()方法来进行创建。该方法返回一个应用程序实例app。
const app = Vue.createApp({
data() {
return {
count: 0
}
}
})- 使用$watchEffect监听数据变化
接下来，我们使用$watchEffect来监听数据count的变化。当count的值改变时，$watchEffect将自动运行相关的副作用函数，并且收集依赖。
app.mount('#app')
app.config.globalProperties.$watchEffect(() => {
console.log('count is', app._data.count)
})在这里，我们将副作用函数简单地打印出当前count的值。在实际项目应用中，副作用函数可以进行更加复杂的操作，例如更新DOM节点等等。$watchEffect会自动地收集Vue实例里的任何响应式属性（包括计算属性、方法等等），并且在这些属性数据发生改变的时候自动运行副作用函数。这样，我们无需手动指定要监听的数据，也无需手动管理依赖收集。
- 修改响应式数据
最后，我们可以试着修改一下count的值，看$watchEffect能否工作正常。
立即学习“前端免费学习笔记（深入）”；
setTimeout(() => {
app._data.count += 1
}, 1000)setTimeout函数用于延迟一段时间，模拟数据变化的效果。当count的值发生改变时，$watchEffect会自动地运行副作用函数，并且打印出新的count值。
通过这个简单的示例，我们可以看到$watchEffect可以帮助我们自动收集依赖，并且在数据发生变化时运行相关的副作用函数，避免了手动管理依赖的麻烦。在实际项目中，$watchEffect是非常实用的响应式数据监听API，可以大大提高开发效率，减少出错的概率。
