06 vue3之watch及watchEffect高级监听器

watch

需要侦听特定的数据源，并在单独的回调函数中执行副作用

watch第一个参数监听源

watch第二个参数回调函数cb（newVal,oldVal）

watch第三个参数一个options配置项是一个对象{

immediate:true //是否立即调用一次

deep:true //是否开启深度监听

}

监听一个值或多个值案例

<template>
  <h2>watch 案例-----------</h2>
  <input type="text" v-model="mes" />
  <input type="text" v-model="mes2" />
</template>

import { ref, reactive, watch, watchEffect } from "vue";
let mes = ref<string>("");
let mes2 = ref<string>("");

// ref 监听一个值时
watch(mes, (newVal, oldVal) => {
  console.log(`新的${newVal}`);
  console.log(`旧的${oldVal}`);
})
// ref 监听二个值时
watch([mes, mes2], (newVal, oldVal) => {
  console.log(`新的${newVal}`);
  console.log(`旧的${oldVal}`);
})

深度监听

<input type="text" v-model="mes3.nav.bar.val" />

import { ref, reactive, watch, watchEffect } from "vue";
let mes3 = reactive({
  nav: {
    bar: {
      val: "cookie",
    },
  },
});

watch(
  mes3,
  (newVal, oldVal) => {
    console.log(`新的${newVal}`);
    console.log(`旧的${oldVal}`);
  },
  {
    deep: true, // 深度监听
    immediate: true, // 第一调用
    flush:"pre"//pre 组件更新之前调用 sync 同步执行 post 组件更新之后执行
  }
);

只监听对象得某个属性，使用函数方式

let re1 = reactive({
  age: "20",
  sex: "男",
});

// 使用函数得方式
watch(
  () => re1.age,
  (newVal, oldVal) => {
    console.log(`新的${newVal}`);
    console.log(`旧的${oldVal}`);
  }
); 

watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

如果用到message 就只会监听message 就是用到几个监听几个 而且是非惰性 会默认调用一次

  <input id="el" type="text" v-model="w1" />
  <input type="text" v-model="w2" />
import { ref, reactive, watch, watchEffect } from "vue";
let w1 = ref<string>("飞机");
let w2 = ref<string>("34");

watchEffect((oninvalidate) => {
  // 可监听一个，也可以是多个值,会自主调用一次
  console.log("w1", w1.value);
  console.log("w2", w2.value);
});

清除副作用

就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

let w1 = ref<string>("飞机");
watchEffect((oninvalidate) => {
  // 可监听一个，也可以是多个值,会自主调用一次
  console.log("w1", w1.value);
  oninvalidate(() => {
    // oninvalidate清除副作用：就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖
    w1.value = "---" + w1.value;
    console.log("监听前触发");
  });
});

停止跟踪

watchEffect 返回一个函数 调用之后将停止更新

const stop =  watchEffect((oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(()=>{
 
    })
    console.log('message2', message2.value);
},{
    flush:"post",
    onTrigger () {
 
    }
})
stop()

更多配置项

 pre                 sync              post

// 更新时机 组件更新前执行 强制效果始终同步触发  组件更新后执行

watchEffect(

  (oninvalidate) => {

    console.log("w1", w1.value);

    let dom = document.querySelector("#el");

    console.log("dom", dom); //dom null==》加了 flush: "post" 输出节点信息

    oninvalidate(() => {

      console.log("oninvalidate监听前触发");

    });

  },

  {

    flush: "post", //  监听时机

    onTrigger() {
       // 可在此处debugeer
      console.log("自主不会调用，onTrigger监听到值变化时调用");

    },

  }

);