Vue3-composition-api使用watch监控响应式数据

测试数据

测试的数据包含响应式的Number变量、string变量、复杂嵌套对象。

let num = ref(0);
    let lunch = ref("??炒蛋");
    let college = reactive({
      name: "信带",
      area: 2700,
      //   对象里的对象需要开启深度监听
      school: {
        s1: {
          name: "计软院",
        },
      },
    });

vue3中从"vue"模块中引用的watch函数包含三个参数,第一个参数用于表示要监视的数据，第二个参数是一个包含两个参数的函数，其第一个参数是旧值，第二个参数是新值，函数体是用于处理新旧数据的逻辑。watch函数的第三个参数是一个配置对象，用于修改监听规则。

术语

• 深度监听: 对于对象的监听可以深入对象内部，将对象内的所有嵌套对象也加入监听。
• 直接监听: 在数据初始化时进行一次监听，即使此时数据还未修改。

监视单个数据的变化

watch(num, (oldv, newv) => {
    console.log(`old=${oldv},new=${newv}`);
});

监视多个数据的变化

// 监视多个数据变化 新值、旧值都是数组
watch(
    [num, lunch],
    (oldv, newv) => {
        console.log(oldv, newv);
    },
    { immediate: true, deep: true }
)

监视reactive包裹的变量

// 无法获取旧值 且强制深度监听
watch(college, (oldv, newv) => {
    console.log(oldv, newv);
})

监视对象中某一个属性

//此时第一个参数写成函数形式
watch(
    () => college.area,
    (oldv, newv) => {
        console.log(oldv, newv);
    }
);

watchEffect函数

watchEffect函数会对其函数体内使用到的响应式数据进行监听，当这些数据发生变化时将会执行参数内的函数体,且默认开启深度监听。该方法较上述使用传统watch函数的方法更为灵活，代码简洁性更高。

/*下述代码在college.school.s1.name发生变化时会执行console.log(tem)
  打印name的新值
*/
watchEffect(() => {
    let tem = college.school.s1.name;
    console.log(tem);
});