Vue3 watchEffect的使用教程和相关概念

import { watchEffect, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    watchEffect(() => {
      console.log(`count is now: ${state.count}`);
    });

    // 测试 count 的变化
    state.count++;
  }
};

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'Vue 3'
    });

    watchEffect(() => {
      console.log(`count: ${state.count}, name: ${state.name}`);
    });

    // 只有 count 发生变化时，才会触发
    state.count++;
  }
};

export default {
  setup() {
    const intervalRef = ref();

    const stop = watchEffect(() => {
      intervalRef.value = setInterval(() => {
        console.log('Interval running');
      }, 1000);
    });

    // 执行一些操作后停止 watchEffect
    setTimeout(() => {
      stop(); // 停止 watchEffect
      clearInterval(intervalRef.value); // 清理定时器
    }, 5000);
  }
};

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    const effect = watchEffect(() => {
      console.log(`count is now: ${state.count}`);
    });

    // 在需要的时候手动触发 effect
    state.count++;
  }
};