vue3-watch、watchEffect侦听器

watch是用来对动态绑定的数据的变化进行监听和操作的一个API。

使用格式为：

watch(监听的字面量，(新值，旧值)=>{

　　　　　　do()

}，

{deep:true} //可选

{flush:sync,pre,post}//3个值可选，sync同步执行，pre组件更新之前执行，post组件更新之后执行。

//flush属性在watch中用的不多，主要使用在watchEffect中。

)

 

 watchEffect是高级侦听，可以在侦听前触发一个回调函数onvalidate，进行防抖之类的操作。

可以使用onTrigger来debugger来调试 watchEffect
格式：

 watchEffect((onvalidate)=>{

　　do()

 

　　　　}，

　　　　{

flush:'post',

onTrigger(e){

　　　　do()

　　　　}

　　}

)

 

<template>

  <div>

    <input type="text" v-model="mountain.address" />

    <br>

    <input type="text" v-model="moutain2" />

    <br>

    <input type="text" v-model="moutain3.name" />

  </div>

</template>

<script setup lang="ts">

import { ref, reactive, watch，watchEffect } from "vue";

watch例子：

const mountain =reactive({

  name: "峨眉山",

  address: "cn",

});

const moutain2 = ref("阿尔卑斯山");

const moutain3=ref({

  name:'华山',

  honor:'五岳之一'

})

watch(

  //监听对象这种引用类型的时候，新值和旧值是相同的，因为在源码里，是直接把新值赋值给旧值的。

  [ mountain, moutain2,moutain3],

  (new_val, old_val) => {

    console.log(new_val, old_val);

  },

  {

    deep: true, //代表深度监听，可以监听引用类型的数据

    //reactive不用开启，源码已经自动开启。

  }

);

 

---

 

watchEffect例子：

const msg = ref<string>("绿草");

const msg2 = ref<string>("牛马");

const stop = watchEffect(

  (onvalidate) => {

    const ipt: HTMLInputElement = document.querySelector("#ipt") as HTMLInputElement;

    console.log(ipt, "ellllll");

    // console.log("msg======>" + msg.value);

    // console.log("msg2======>" + msg2.value);

    //onvalidate会在监听之前执行

    onvalidate(() => {

      console.log("before");

    });

  },

  {

    //可以利用debugger来调试

    flush: "post",

    // onTrigger(e) {

    //   debugger;

    // },

  }

);

const stopWatch = () => stop(); //以函数形式调用watchEffect之后，会停止监听。

 

</script>

<style scoped>

</style>