vue watcheffect

作者：残情弑天发布日期:2025-09-22 浏览:22

// 使用 Vue 3 的 watchEffect 示例

import { ref, watchEffect } from 'vue';

// 创建一个响应式变量
const count = ref(0);

// 使用 watchEffect 监听 count 的变化
watchEffect(() => {
  console.log(`当前的 count 值为: ${count.value}`);

  // 如果有依赖项（如 API 请求），可以在这里处理副作用
  // 注意：watchEffect 会立即执行一次，并在依赖项发生变化时重新执行
});

// 模拟更新 count
setTimeout(() => {
  count.value++;
}, 1000);

// 解释：
// 1. `watchEffect` 会立即执行传入的函数，并追踪其中的响应式依赖。
// 2. 当依赖项（如 `count`）发生变化时，`watchEffect` 会自动重新运行该函数。
// 3. `watchEffect` 适用于需要在响应式依赖变化时自动执行某些操作的场景。

上一篇：vue2安装

下一篇：npm创建vue3项目