生命周期函数

函数名	触发时机	说明
onBeforeMount	在组件挂载之前调用	在这个阶段，组件实例已经创建完成，但尚未开始挂载到 DOM 上。可以在这个阶段执行一些准备工作或获取一些异步数据。
onMounted	在组件挂载完成后调用	在这个阶段，组件已经完成了初始渲染，并且已经挂载到了 DOM 上。可以在这个阶段进行 DOM 操作、事件监听等。
onBeforeUpdate	在组件更新之前调用	在这个阶段，组件即将进行重新渲染，但尚未应用更新。可以在这个阶段执行一些准备工作或取消一些计算开销较高的操作。
onUpdated	在组件更新完成后调用	在这个阶段，组件已经完成了重新渲染，并且更新已经应用到 DOM 上。可以在这个阶段进行 DOM 操作、事件监听等。
onBeforeUnmount	在组件卸载之前调用	在这个阶段，组件即将被卸载，但尚未从 DOM 中移除。可以在这个阶段执行一些清理工作，如取消订阅、清除定时器等。
onUnmounted	在组件卸载完成后调用	在这个阶段，组件已经完成了卸载，所有的事件监听和数据观测都已被移除。可以在这个阶段进行最后的清理工作。

常用的 api

watch()

#### watch()

- 功能：监视一个或多个响应式数据的变化，并在变化时触发回调函数的执行。
- 用法：在 `setup()` 函数中使用 `watch` 方法。
- 参数：source, callback, options
- 示例：

```javascript
import { ref, watch } from "vue";

export default {
  setup() {
    const count = ref(0);

    watch(count, (newValue, oldValue) => {
      console.log(`count 的值发生了变化：${oldValue} -> ${newValue}`);
    });

    setTimeout(() => {
      count.value++;
    }, 1000);
  },
};
```

• options:有如下参数
  • immediate：在侦听器创建时立即触发回调。第一次调用时旧值是 undefined
  • deep：如果源是对象，强制深度遍历，以便在深层级变更时触发回调。
  • flush：调整回调函数的刷新时机。(pre|post|sync),默认pre

watchEffect()

#### watchEffect()

- 功能：监视响应式数据的变化，每次变化都会触发回调函数的执行。
- 用法：在 `setup()` 函数中使用 `watchEffect` 方法。
- 参数：effectCallback,options
- 示例：

```javascript
import { ref, watchEffect } from "vue";

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      console.log(`count 的值发生了变化：${count.value}`);
    });

    setTimeout(() => {
      count.value++;
    }, 1000);
  },
};
```

• options:有如下参数
  • flush：调整回调函数的刷新时机。(pre|post|sync),默认pre

watchPostEffect()

#### watchPostEffect()

- 功能：在 DOM 更新之后延迟执行副作用代码。
- 用法：在 `setup()` 函数中使用 `watchPostEffect` 方法。
- 示例：

```javascript
import { ref, watchPostEffect } from "vue";

export default {
  setup() {
    const count = ref(0);

    watchPostEffect(() => {
      console.log("DOM 已经更新完毕");
    });

    setTimeout(() => {
      count.value++;
    }, 1000);
  },
};
```

watchSyncEffect()

#### watchSyncEffect()

- 功能：在 数据 更新之后立即执行副作用代码。
- 用法：在 `setup()` 函数中使用 `watchSyncEffect` 方法。
- 示例：

```javascript
import { ref, watchSyncEffect } from "vue";

export default {
  setup() {
    const count = ref(0);

    watchSyncEffect(() => {
      console.log("DOM 未更新完毕");
    });

    setTimeout(() => {
      count.value++;
    }, 1000);
  },
};
```

关于刷新时机

测试代码