前言：

今天小编给大家讲解一下，Vue3 中组合式下的侦听器。

我正在参加 2022年「博客之星」年度总评选，请大家帮我支持一下，给我一个五星。
|
点击前往我的评选页面：
|

大家只要按图给我五星即可，谢谢大家的帮助。

前置代码：

下面的所有代码都写在前置代码的 script 标签中

<script setup>
// 1. 原始类型
import { ref, reactive, watch, watchEffect, watchPostEffect } from "vue";
// 账号
const account = ref("abc");
// 员工
const emp = reactive({
  name: "Jack",
  salary: 8000,
});
// 部门
const dept = reactive({
  id: "101",
  name: "技术部",
});
</script>

创建侦听器

侦听：原始类型的数据变化
watch(source,callback,options)

source 需要监听的数据源
callback 执行的回调函数，参数1：新值，参数2：旧值
options 配置项 Object类型（按需使用）
1. deep:true
2. immediate:true
3. flush:‘post’

watch(account, (newData, oldData) => {
  console.log("---账号的新旧值---");
  console.log(newData);
  console.log(oldData);
  console.log("-----------------");
});

停止侦听器

停止侦听器：调用watch() 返回的函数即可

// 需要自行停止侦听器时，可以调用 $watch() 返回的函数
let stopWatch = watch(account, (newData, oldData) => {
console.log("---账号的新旧值---");
console.log(newData);
console.log(oldData);
console.log("-----------------");
});
setTimeout(() => {
  stopWatch();
}, 3000);

watch侦听：对象中的某一个属性变化(需要提供getter函数才行)

watch(
  () => emp.salary,
  (newData, oldData) => {
    console.log("---薪资的新旧值---");
    console.log(newData);
    console.log(oldData);
    console.log("-----------------");
  }
);

watch侦听：整个对象

watch(emp, (newData, oldData) => {
  console.log("---信息的新旧值---");
  console.log(newData);
  console.log(oldData);
  console.log("-----------------");
});

watch侦听：如果嵌套属性发生改变，默认是无法执行回调函数的?

解决1：侦听指定的属性（如果属性过多，如果属性名未知）
解决2：配置深度侦听（新旧值相等，无法获取到旧值）

watch(
  () => dept,
  (newData, oldData) => {
    console.log("---部门的新旧值---");
    console.log(newData);
    console.log(oldData);
    console.log("-----------------");
  },
  {
    deep: true,
  }
);

watch侦听：侦听多个数据源组成的数组

watch(
  [account, () => emp.salary, dept],
  // 回调函数中：参数1：新值的数组，参数2：旧值的数组
  ([newAccount, newSalary, newDept], [oldAccount, oldSalary, oldDept]) => {
    console.log("---账号的新旧值---");
    console.log(newAccount);
    console.log(oldAccount);
    console.log("---薪资的新旧值---");
    console.log(newSalary);
    console.log(oldSalary);
    console.log("---部门的新旧值---");
    console.log(newDept);
    console.log(oldDept);
    console.log("-----------------");
  }
);

watchEffect：

watchEffect() 会立即执行一遍回调函数，如果这个时候函数产生了副作用，
Vue 会自动追踪副作用的依赖关系，自动分析出响应源
回调函数中用到的数据源，如果发生了改变，会自动监听，并重新执行该函数

watchEffect(() => {
  // 回调函数中用到的数据源，如果发生了改变，会自动监听，并重新执行该函数
  console.log("账号：" + account.value);
  console.log("薪资：" + emp.salary);
  console.log(document.getElementById("main"));
});

watchPostEffect:

回调的触发时机：默认情况下，创建的侦听器，都会在Vue组件更新状态之前调用，所以获取的都是DOM更新之前的状态

如果想访问更新之后的状态呢？

添加配置项 flush:‘post’
调用更方便的别名 watchPostEffect()
watchEffect() 和 watchPostEffect() 这两个函数的停止侦听
和 watch 完全一致，都是调用返回的函数即可

let stopPost = watchPostEffect(() => {
  console.log("部门：" + dept.name);
  console.log(document.getElementById("main"));
});

总结：

watch：（手动性）
1. 显式的指定依赖数据，依赖数据更新时，才会执行回调函数
2. 具有惰性，第一次页面展示的时候不会执行，只有当指定的数据源发生改变时，才会执行；
3. 监听ref定义的响应式数据时，可以获取到原值；
4. 即要指明监听的属性，也要指明监听的回调；
watchEffect：（自动性）
1. 自动收集依赖数据，依赖数据更新时，重新执行回调函数
2. 立即执行，没有惰性，页面首次加载就会执行
3. 无法获取到原值，只能得到变化后的值（新值）
4. 不能指明监视那个属性，监听的回调中，用到那个属性就监听那个属性

最后还请大家帮我点击一下，谢谢大家的帮助