vue作为一门前端框架，其核心之一就是数据驱动视图。在vue中定义的数据发生变化时，对应的视图也随之更新。在vue3中，为了优化性能和响应速度，引入了响应式(reactivity)系统和composition api。watcheffect作为响应式系统的一部分，可以监测数据变化并即时更新dom。本文将详细介绍vue中如何使用watcheffect监听响应式数据并更新dom。
一、响应式系统
在Vue3中，响应式系统的核心是被称为“反应性对象(Reactive Objects)”的普通JavaScript对象。通过使用reactive函数将一个对象转化为响应式对象，从而让Vue可以跟踪并响应这个对象中数据的变化。
在响应式系统中使用的API主要有：
- reactive：将一个普通的JavaScript对象转化为响应式对象。
- ref：将一个普通的JavaScript对象转化为响应式对象，并给这个对象添加.value属性，可以直接访问这个对象的值和修改它的值。在模板中使用时需要用.value来操作。
- toRefs：将一个响应式对象转化为普通JavaScript对象，其中每个属性都被封装为ref对象。
- computed：定义一个计算属性，返回值为响应式对象，在计算过程对响应式对象的依赖发生变化时，computed函数会自动重新计算并更新。
二、watchEffect
立即学习“前端免费学习笔记（深入）”；
watchEffect是Vue3中新增的API，它可以根据响应式对象自动推断出需要监听的依赖，一旦依赖的数据发生变化，watchEffect中的回调函数就会立即被触发。watchEffect的使用方式类似于computed，但是watchEffect不需要访问属性，它只需要在回调函数中直接使用响应式对象。
watchEffect有以下几个特点：
- watchEffect执行的时机为Dom更新前，因此可以在该函数中更新数据后直接使用。
- watchEffect能自动追踪响应式数据的变化，无需手动指定依赖。
- watchEffect需要返回一个无参数的清理函数，在watchEffect的相关依赖发生变化被重新运行时，清理函数会被自动调用以释放资源。
在使用watchEffect时需要注意的事项为：
- 不要在watchEffect中执行过度耗时操作，因为每次数据更新时都会执行。
- 如果需要精确监听某个数据的变化，还应该使用watch函数或watchEffect的依赖参数来进行指定。
三、使用watchEffect更新DOM
我们可以将watchEffect函数用于Vue的单文件组件中，在回调函数中更新DOM结构。这样，每当组件中的响应式数据发生变化时，我们都可以立即看到结果的变化。
下面我们以一个计数器为例来演示watchEffect函数的使用：
<!-- Counter.vue -->
<template>
<div>
<button @click="increment">{{ count }}</button>
</div>
</template>
<script>
import { reactive, watchEffect } from 'vue'
export default {
setup() {
const state = reactive({
count: 0
})
watchEffect(() => {
document.title = `计数器：${state.count}`
})
function increment() {
state.count++
}
return {
count: state.count,
increment
}
}
}
</script>在这个示例中，我们定义了一个响应式对象state，并使用watchEffect函数监听其变化。当count属性发生变化时，watchEffect回调函数中的代码会被自动执行，更新了浏览器的标签页标题。
除了更新浏览器标题，我们可以通过watchEffect函数实现更多的数据绑定操作，譬如class和style绑定、文本插值等操作。通过这些方式，我们可以灵活地控制组件的显示和隐藏、样式调整等等。
四、总结
在Vue3中，watchEffect是一个十分实用的工具，它能够在数据发生变化时非常快速地更新DOM。使用watchEffect函数时，需要注意其所监听的对象和回调函数中的代码，以保证性能和代码质量。除watchEffect外，Vue3还提供了更多的响应式函数和Composition API，可以结合使用来满足不同的需求。
