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

一、watch与watchEffect的区别

watch 和 watchEffect 都能响应式地执行有副作用（除了返回预期结果外还会简介影响其它数据）的回调。它们之间的主要区别是追踪响应式依赖的方式

• watch：只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

• watchEffect：会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。watchEffect中的

示例：

当然，它们还有一些其它区别，这里做一下简单的总结:

watch:

1.只侦听明确的数据。

2.只在侦听数据发生变动时触发。

3.提供变化前后的值。

watchEffect:

1.追踪能访问到的所有响应式属性。

2.初始化时会触发一次。

3.不提供变化前后的值

二、watch使用方式

1.watch使用展示

(1).单个ref侦听

const num1 = ref(0)
watch(num1, (newVlue, oldVlue) => {
  console.log(newVlue, oldVlue);
});

(2).多个ref侦听

const num1 = ref(1);
const num2 = ref(2);
 
watch([num1, num2], (newNum1, newNum2) => {
  console.log(newNum2, newNum3);
});
 
 

(3).getter 函数

const num1 = ref(1);
const num2 = ref(2);
watch(
  () => num1.value + num2.value,
  (sum) => {
    console.log(sum);
  }
);

2.侦听响应式对象的注意事项

响应式对象的值需要深度侦听才能得到，在ref侦听中会隐式地创建一个深层侦听器，在getter 函数方式侦听中则需要主动加一个{ deep: true }

const num1 = reactive({ a: 1 });
// 当num1.a从1变为2时
watch(num1, (newNum1, oldNum1) => {
  console.log(newNum1.a, oldNum1.a); //2，2：可以正常侦听num1.a的变化,但是侦听旧值失败
});
watch(num1.a, (newNum1, oldNum1) => {
  console.log(newNum1, oldNum1); //报错
});
watch(
  () => num1,
  (a) => {
    console.log(a); //无反应，不能侦听num1的属性值的变化
  }
);
watch(
  () => num1.a,
  (a) => {
    console.log(a); //可以正常侦听num1.a的变化
  }
);
watch(
  () => num1,
  (num1) => {
    console.log(num1.a); //2:可以正常侦听num1.a的变化
  },
  { deep: true }//开启深度侦听
);

3.即时回调侦听器：{ immediate: true }

当使用watch时需要像watchEffect那样刚开始就执行一次时，可以使用{ immediate: true }

代码演示：

const num1 = ref(1);
watch(
  num1,
  (newNum1, oldNum1) => {
    console.log(newNum1, oldNum1); //1,undefined
  },
  { immediate: true }
);

4.一次性侦听器：{ once: true }

当希望只对某个ref只侦听一次时，可以使用{ once: true }

const num1 = ref(1);
watch(
  num1,
  (newNum1, oldNum1) => {
    console.log(newNum1); // 当num1从1变为2时:2,接着num1从2变为3:无反应
  },
  { once: true }
);

三、watchEffect使用方式

1.跟踪对象多个属性

watchEffect只跟踪回调中被使用到的属性，而不是递归地跟踪所有的属性，对于需要侦听一个对象中多个属性的情况watchEffect比深度侦听效率更高。

const nums = reactive({
  num1: 1,
  num2: 2,
  num3: 3,
});
watchEffect(() => {
  console.log(nums.num1 + nums.num2 + nums.num3);//num1,num2,num3任意一个变化时触发
});

2.响应式数据请求

通过使用watchEffect可以在数据变化时自动发起请求，如下所示，当data变化时会自动发起新的请求

watchEffect(() => {
  axios.post("https://ljy.com:5000/chat", data).then((res) => {
    resData.value = res.data;
  });
});

四、watchPostEffect使用方式（dom更新后侦听）

vue的更新是异步的， Vue 的响应式数据发生变化时，Vue 不会立即更新 DOM，而是会等待当前同步任务执行完毕，然后在下一个事件循环的“tick”中执行更新。默认情况下，侦听器回调会在父组件更新 (如有) 之后、所属组件的 DOM 更新之前被调用。这意味着如果你尝试在侦听器回调中访问所属组件的 DOM，那么 DOM 将处于更新前的状态。

 
class="mian" ref="main">
      {{ a }}