Vue3 watch 与 watchEffect 用法

Vue3 watch 与 watchEffect 用法

两者的区别：

1、watch 是惰性执行，而 watcheffect 不是，不考虑 watch 的第三个参数配置的情况，watch 在组件第一次执行的时候是不会执行的，只有在之后依赖项变化的时候再执行，而 watcheffect 是在程序执行到此处的时候就立即执行，而后再响应其依赖变化执行。
2、接受的参数不同，watch接受三个参数，watchEffect接受两个参数。
3、watch可以监听reactive，ref定义的值，无需指定某一个属性，而watchEffect必须指定某一个属性。

watch 几种用法

import {ref, watch} from "vue";
let num = ref(0);
let data = reactive(
	{
		a: 100
	}
);
setTimeout(() => {
  num.value++;
  data.a--;
}, 2000);

第一种 监听整体变量。

// ref
watch(num, newVal => {
  console.log(newVal);
});
// reactive
watch(data, newVal => {
  console.log(newVal);
});

第二种 监听某一个属性，这是 watch 第一个参数必须是一个回调函数，也就是一个getter函数。

// 对于 ref 监听值
watch(() => num.value, newVal => {
  console.log(newVal);
});
// reactive
watch(() => data.a, newVal => {
  console.log(newVal);
});

第三种 监听多个值，参数一返回的是一个数组，参数二对应每一项也是一个数组。

watch(() => [num.value, data.a], ([newNum, newData], [oldNum, oldData]) => {
  console.log(newNum, newData);
  console.log(oldNum, oldData);
});

watchEffect 用法

参数一是一个副作用函数，在这个副作用函数，会收集在这个函数中，用到的所有reactive，ref等声明的变量，作为监听触发依据，但必须是具体值，比如，如果是ref声明的变量必须.value，直接变量是不行的，它只会在初始化的调用一次，在以后的数据变化是监听不到的。reactive声明的变量也一样，要到具体的某个属性。

// 只会在初始化的时候调用一次
watchEffect(() => {
  console.log(num);
});
// 当数据改变的时候也会监听到
watchEffect(() => {
  console.log(num.value);
});

所以就可以换种想法，只要在watchEffect里用的副作用，都可以被监听到，如下，不管是num.value还是data.a的值发生变化的时候，都会监听到。

watchEffect(() => {
  console.log(num.value);
  console.log(data.a)
});

两者参数

1、watch

1. 参数一：既可以是一个变量，也可以是一个回调函数，这得看具体监听依赖形式。
2. 参数二：触发回调函数，
   1. 参数一：新值（也可以是一个新值数组）
   2. 参数二：旧值（也可以是一个旧值数组）
   3. 参数三：清除副作用函数。清除定时器，HTTP请求等。
3. 参数三：配置项
   1. flush：调整回调的刷新时机。
      （1）post：侦听器延迟到组件渲染之后再执行。
      （2）sync：在 Vue 进行任何更新之前触发。
      （3）pre：表示在dom更新前调用。默认
   2. immediate：在侦听器创建时立即触发回调
   3. deep：深度监听。
   4. onTrack / onTrigger：调试侦听器的依赖关系。

2、watchEffect

1. 参数一：回调函数。
   1. 参数一：清除副作用函数。清除定时器，HTTP请求等。
2. 参数二：配置项
   1. flush：调整回调的刷新时机。
      （1）post：侦听器延迟到组件渲染之后再执行。
      （2）sync：在 Vue 进行任何更新之前触发。
      （3）pre：表示在dom更新前调用。默认
   2. onTrack / onTrigger：调试侦听器的依赖关系。

注意

1、watchEffect 获取不到新值和旧值，因为它就像一个大杂烩，监听多个未知的依赖，不像watch指明依赖。
2、watchEffect 返回一个函数，用于停止侦听器。

const stop = watchEffect(() => {})
// 当不再需要此侦听器时:
stop()