vue3-watch、watchEffect侦听器

标签：const 侦听器 watch watchEffect console ref 监听

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>

标签：const,侦听器,watch,watchEffect,console,ref,监听
From： https://www.cnblogs.com/hb-iu/p/16955471.html