Vue侦听器:watch与watchEffect的区别与使用

import { ref, watch } from 'vue'; 

const count = ref(0); 

// 侦听 count 的变化 
watch(count, (newVal, oldVal) => { 
    console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});
// 修改 count，触发 watch 回调 
count.value = 1; // 输出：count 从 0 变为 1

import { ref, watch } from 'vue'; 

const a = ref(0); 
const b = ref(0); 
// 侦听多个数据源 
watch([a, b], ([newA, newB], [oldA, oldB]) => { 
  console.log(`a 从 ${oldA} 变为 ${newA}`); 
  console.log(`b 从 ${oldB} 变为 ${newB}`); 
});

// 修改 a 或 b，触发 watch 回调 
a.value = 1; // 输出：a 从 0 变为 1，b 从 0 变为 0 
b.value = 2; // 输出：a 从 1 变为 1，b 从 0 变为 2

import { reactive, watch } from 'vue'; 

const state = reactive({ count: 0, name: 'Vue' }); 
// 侦听 state.count 的变化 
watch( 
  () => state.count, 
  (newVal, oldVal) => { 
    console.log(`count 从 ${oldVal} 变为 ${newVal}`); 
  } 
);

// 修改 state.count，触发 watch 回调 
state.count = 1; // 输出：count 从 0 变为 1

import { reactive, watch } from 'vue';

const state = reactive({ 
  user: { name: 'Vue', age: 3 } 
}); 

// 深度侦听 state.user 的变化 
watch(
  () => state.user, 
  (newVal, oldVal) => {
    console.log('user 对象发生变化', newVal); 
  }, 
  { deep: true } // 开启深度侦听 
); 
// 修改 state.user.age，触发 watch 回调 
state.user.age = 4; // 输出：user 对象发生变化 { name: 'Vue', age: 4 }

import { ref, watch } from 'vue'; 

const count = ref(0); 、

// 立即执行 watch（组件挂载时执行一次） 
watch( 
  count, 
  (newVal, oldVal) => { 
    console.log(`count 当前值为 ${newVal}`);
  }, 
  { immediate: true } // 开启立即执行 
); 
// 输出：count 当前值为 0

import { ref, watchEffect } from 'vue'; 

const count = ref(0); 
const name = ref('Vue'); 

// 隐式侦听 count 和 name 的变化 
watchEffect(() => { 
  console.log(`count: ${count.value}, name: ${name.value}`);
}); 
// 输出：count: 0, name: Vue 

// 修改 count，触发 watchEffect 回调 
count.value = 1; // 输出：count: 1, name: Vue 

// 修改 name，触发 watchEffect 回调 
name.value = 'React'; // 输出：count: 1, name: React

import { ref, watchEffect } from 'vue'; 

const count = ref(0); 

// 停止侦听 
const stop = watchEffect(() => {
  console.log(`count: ${count.value}`); 
}); 

// 修改 count，触发 watchEffect 回调 
count.value = 1; // 输出：count: 1 

// 停止侦听 
stop(); 

// 修改 count，不再触发 watchEffect 回调 
count.value = 2; // 无输出

import { ref, watchEffect } from 'vue'; 

const id = ref(0); 

watchEffect((onInvalidate) => { 
  // 模拟数据请求 
  const timer = setTimeout(() => { 
    console.log(`请求数据，id: ${id.value}`);
  }, 1000); 
  
  // 清除副作用（组件卸载或依赖变化时执行） 
  onInvalidate(() => { 
    clearTimeout(timer); 
    console.log('清除定时器');
  });
}); 

// 修改 id，触发 watchEffect 回调 
id.value = 1; 
// 输出：清除定时器，然后 1 秒后输出：请求数据，id: 1