Vue3中的watch怎么使用

    watch函数用于侦听某个值的变化,当该值发生改变后,触发对应的处理逻辑。

    一、watch的基本实例

    <template>
      <div>
        <div>{{ count }}</div>
        <button @click="changCount">更改count的值</button>
      </div>
    </template>
     
    <script setup>
    import {ref,reactive, watch} from &#39;vue&#39;
    const count = ref(0)
    function changCount(){
      count.value++
    }
    watch(count,(newValue,oldValue)=>{
      if(newValue){
        console.log(`我侦听到了count状态的变化,当前值为${newValue},从而处理相关逻辑`);
      }
    })
    </script>
     
    <style>
     
    </style>

    二、watch监听多个数据

    getter 函数:

    <template>
      <div>
        <div>{{ x }}</div>
        <button @click="changCount">更改count的值</button>
      </div>
    </template>
     
    <script setup>
    import { ref, reactive, watch } from "vue";
    const x = ref(1);
    const y = ref(5);
    function changCount() {
      x.value++;
    }
    watch(
      () => x.value + y.value,
      (sum) => {
        console.log(`我是x与y之和${sum}`);
      }
    );
    </script>
     
    <style>
    </style>

    多个来源组成的数组

    <template>
      <div>
        <div>{{ x }}</div>
        <button @click="changCount">更改count的值</button>
      </div>
    </template>
     
    <script setup>
    import { ref, reactive, watch } from "vue";
    const x = ref(1);
    const y = ref(5);
    function changCount() {
      x.value++;
    }
    watch(
      [x,y],
      ([x,y]) => {
        console.log(`我是x=>${x},我是y=》${y}`);
      }
    );
    </script>
     
    <style>
    </style>

    三、watch监听对象的值

    <template>
      <div>
        <div>{{ obj.name }}</div>
        <button @click="changObj">更改count的值</button>
      </div>
    </template>
     
    <script setup>
    import { ref, reactive, watch } from "vue";
    const obj = ref({name:&#39;你好&#39;})
    function changObj(){
      obj.value.name+=&#39;我不好&#39;
    }
    watch(()=>obj.value.name,(name)=>{
      console.log(name);
    })
    </script>
     
    <style>
    </style>

    四、watch监听器的配置参数

    1.deep

    用于开启深度监听

    <template>
      <div>
        <div>{{ obj.name }}</div>
        <button @click="changObj">更改count的值</button>
      </div>
    </template>
     
    <script setup>
    import { ref, reactive, watch, watchEffect } from "vue";
    const obj = ref({name:&#39;你好&#39;})
    function changObj(){
      obj.value.name+=&#39;我不好&#39;
    }
    // obj是一个RefImpl对象,当不开启深度监听的时候,监听obj无法检测到obj属性的变化
    watch(obj,()=>{
      console.log(obj.value.name);
    }, { deep: true })
    </script>
     
    <style>
    </style>

    2.immediate

    是否开启初始化检测,默认是值发生变化时,才会执行监听器里面的方法,开启immediate后初始化就执行一次。

    <template>
      <div>
        <div>{{ obj.name }}</div>
        <button @click="changObj">更改count的值</button>
      </div>
    </template>
     
    <script setup>
    import { ref, reactive, watch, watchEffect } from "vue";
    const obj = ref({name:&#39;你好&#39;})
    function changObj(){
      obj.value.name+=&#39;我不好&#39;
    }
    // obj是一个RefImpl对象,当不开启深度监听的时候,监听obj无法检测到obj属性的变化
    watch(obj,()=>{
      console.log(obj.value.name);
    }, { deep: true,immediate:true })
    </script>
     
    <style>
    </style>

    五、通过watchEffect()简化watch

    侦听器的回调使用与源完全相同的响应式状态是很常见的。例如:

    <template>
      <div>
        <div>{{ obj.name }}</div>
        <button @click="changObj">更改count的值</button>
      </div>
    </template>
     
    <script setup>
    import { ref, reactive, watch, watchEffect } from "vue";
    const obj = ref({name:&#39;你好&#39;})
    function changObj(){
      obj.value.name+=&#39;我不好&#39;
    }
    watch(obj.value,()=>{
      console.log(obj.value.name);
    })
    </script>
     
    <style>
    </style>

    我们可以使用watchEffect 函数来简化上面的代码。watchEffect() 允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为:

    <template>
      <div>
        <div>{{ obj.name }}</div>
        <button @click="changObj">更改count的值</button>
      </div>
    </template>
     
    <script setup>
    import { ref, reactive, watch, watchEffect } from "vue";
    const obj = ref({name:&#39;你好&#39;})
    function changObj(){
      obj.value.name+=&#39;我不好&#39;
    }
    // watch(obj.value,()=>{
    //   console.log(obj.value.name);
    // })
    watchEffect(()=>{
      console.log(obj.value.name);
    })
    </script>
     
    <style>
    </style>

    注:需要注意的是watchEffect 回调会立即执行,不需要指定immediate

    六、watch vs. watchEffect

    watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式:

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

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

    七、回调触发机制与停止监听器

    如果想在侦听器回调中能访问被 Vue 更新之后的 DOM,你需要指明 flush: 'post' 选项:

    watch(source, callback, {
      flush: &#39;post&#39;
    })
     
    watchEffect(callback, {
      flush: &#39;post&#39;
    })

    停止监听

    在 setup() 或