Vue3.0 watch和watchEffect监听器：VCA

简介

在项目中，有时候检测一个变量的值是否反升了变化。通常使用的watch或者使用低效的循环判断。 在次vue中给我们设置了深度监测数据繁盛变化的方法。

1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; 2.immediate:true,代表watch里面声明了之后会立马执行handler里面的函数

案列

<template><div><input type="text" v-model="mytext" class="form-control"><select v-model="myselect" class="form-control"><option v-for="(item, index) in datalist" :key="item">{{ item }}</option></select></div>
</template>
<script>
import { reactive, ref, watch, watchEffect } from 'vue';
import 'bootstrap/dist/css/bootstrap.css'export default {setup() {const mytext = ref("")const myselect = ref("中国")const datalist = ref(["中国", "美国", "俄罗斯", "德国", "法国"])//-----------监听一个对象//监听mytext：写法一watch(mytext, (newValue, oldValue) => {console.log("新的值", newValue)console.log("老的值", oldValue)})//监听mytext：写法二watch(() => mytext.value, (newValue, oldValue) => {console.log("新的值", newValue)console.log("老的值", oldValue)})//监听myselect：写法二watch(() => myselect.value, (newValue, oldValue) => {console.log("新的值", newValue)console.log("老的值", oldValue)})//-----------监听多个对象//监听mytext和myselect：写法三//参数1：表示你需要监听的数据源//参数2：表示你要干什么，它是一个handler函数//参数3：表示是否立即执行一次，还是等监听的对象发生改变后再执行。watch([mytext,myselect], (newValue, oldValue) => {//--------这一块就是handler函数内容---startconsole.log("新的值", newValue)console.log("老的值", oldValue)//我们可以在这里做一些ajax请求//--------这一块就是handler函数内容---End}, { immediate: true, deep: false })//immediate:true表示组件加载后立即执行handler里面的函数。它会再setup钩子函数后，onBeforeMount钩子函数前执行//deep:false表示不做深度监听，为true表示深度监听，慎用deep:true因为当一个对象比较复杂的时候，对象里面有对象...层次太深容易带来性能和预料外的事情//1、watchEffect会在初始化的时候调用一次，相当于watch中的immediate:true//2、它不需要具体监听某个数据源发生变化，只要它里面用到对象数据发生变化就会立马执行一次watchEffect：比如如下代码它里面用到了两个对象数据，如：1、mytext 2、myselect//3、VCA中才有watchEffect，VOA中没有watchEffectwatchEffect(() => {console.log(mytext.value); //只要mytext值发生改变就立即执行watchEffectconsole.log(myselect.value); //只要myselect值发生改变就立即执行watchEffectconsole.log("我被执行了");})return {mytext,myselect,datalist}}
}
</script>