watchEffect

watchEffect 函数立即执行一次传入的函数，并响应式地追踪其依赖。当依赖项变化时，会自动重新执行该函数。该函数返回一个停止副作用的停止函数。

watchEffect的特点

自动依赖追踪：不需要手动传入参数，函数内部访问的响应式数据将被自动追踪。
立即执行：页面加载时，watchEffect 会立即执行一次传入的函数。
只读变化后的值：在 watchEffect 中无法获取变化前的值，只能访问变化后的值。
响应式监听：函数内部使用到的响应式数据将被自动监听。

1<template>
2  <div>num: {{ num }}</div>
3  <div>age: {{ obj.age }}</div>
4  <button @click="increment">增加</button>
5</template>
6
7<script lang="ts" setup>
8import { ref, reactive, watchEffect } from 'vue';
9
10// 定义响应式数据
11const num = ref(10);
12const obj = reactive({
13  age: 10
14});
15
16// 自动追踪依赖并执行副作用
17watchEffect(() => {
18  console.log('num', num.value); // 输出变化后的值
19  console.log('age', obj.age);   // 输出变化后的值
20});
21
22// 定义一个方法来修改响应式数据
23const increment = () => {
24  num.value++;
25  obj.age++;
26};
27</script>

watch 与 watchEffect 的对比

监听变化：两者都能监听响应式数据的变化，但方式不同。
明确性：watch 需要明确指出监视的内容，而 watchEffect 不需要，它会自动监视函数内部使用到的响应式数据。
使用场景：watch 适合需要访问变化前后值的场景，而 watchEffect 适合于副作用的自动执行和依赖追踪。

watchEffect#

watch 与 watchEffect 的对比#

watchEffect

watch 与 watchEffect 的对比