vue3中响应式侦听

vue3提供了两个函数来侦听数据源的变化：watch和watchEffect

watch需要监听某个数据源，然后执行具体的回调函数，可监听单个数据源，也可以把多个值放在一个数组中进行侦听，最后的值也以数组形式返回。

watchEffect和watch的区别：

   1.watchEffect不需要手动传入依赖

   2.每次初始化时watchEffect都会执行一次回调函数来自动获取依赖

   3.watchEffect无法获取到原值，只能得到变化后的值

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<script>
import { reactive, ref,watch, watchEffect } from "vue";
export default {
  setup() {
    let num1 = ref(1);
    let num2 = reactive({
      year: 2021,
    });
    // 监听单个数据源
    watch(()=>num2.year,(newVal,oldVal)=>{
      console.log(newVal,oldVal);
    })
    // 监听多个数据源
    watch([()=>num2.year,num1],(newVal,oldVal)=>{
      console.log(newVal,oldVal);
      // 打印结果：[2022, 2][2021, 1]
    })
    // watchEffect和watch的区别：
    // 1.watchEffect不需要手动传入依赖
    // 2.每次初始化时watchEffect都会执行一次回调函数来自动获取依赖
    // 3.watchEffect无法获取到原值，只能得到变化后的值
    watchEffect(() => {
      console.log(num1.value);
      console.log(num2.year);
    });

    setInterval(() => {
      num1.value=2;
      num2.year=2022;
    }, 2000);

    return {
      num1,
      num2,
    };
  },
};
</script>

stop 停止监听,我们在组件中创建的watch监听，会在组件被销毁时自动停止。如果在组件销毁之前我们想要停止掉某个监听， 可以调用watch()函数的返回值

 setup() {
    let num1 = ref(1);
    let num2 = reactive({
      year: 2021,
    });
   
    const stop = watch([num1, () => num2.year], (newVal, oldVal) => {
      console.log(newVal, oldVal);
      // 打印结果：[2022, 2][2021, 1]
    });
    function jia() {
      num1.value++;
      num2.year++;
    }
    // 3秒后停止监听
    setInterval(() => {
      stop();
    }, 3000);