Watch和WatchEffect区别

watch(getter,(newvalue,oldvalue)=>{}，{deep:true})

getter返回的是响应式对象的值

这个位置可以是一个响应式对象，也可以用箭头函数写一个响应式对象的属性

第三个参数可选{deep:true}

1.watch 监听的是响应式数据

2.监听类型

• 响应式数据ref,reactive
• 计算数据，计算公式包含响应式数据

const x1 = ref(12);
const x2 = ref(13);
watch(
  () => x1.value + x2.value,
  (newValue, oldValue) => {
    console.log("新的值:", newValue);
    console.log("旧的值:", oldValue);
  }
);

• 监听数组，前提是这个数组内部含有响应式数据
• 深层监听，getter箭头函数里是一个对象，可以加{deep:true}

注意：当我们第一进入页面时，watch 监听函数的回调函数是不会执行的。

watchEffect 也是一个监听器，只不过它不会像 watch 那样接收一个明确的数据源，它只接收一个回调函数。而在这个回调函数当中，它会自动监听响应数据，当回调函数里面的响应数据发生变化，回调函数就会立即执行。

 

参考文献：

https://juejin.cn/post/7109009230132150280