Vue3.0 watch和watchEffect监听器:VCA

简介

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

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

案列

html 复制代码
<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函数内容---start
      console.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中没有watchEffect
    watchEffect(() => {
      console.log(mytext.value); //只要mytext值发生改变就立即执行watchEffect
      console.log(myselect.value); //只要myselect值发生改变就立即执行watchEffect

      console.log("我被执行了");
    })

    return {
      mytext,
      myselect,
      datalist
    }
  }
}
</script>
相关推荐
吃饺子不吃馅2 分钟前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
这里有鱼汤28 分钟前
miniQMT下载历史行情数据太慢怎么办?一招提速10倍!
前端·python
用户21411832636021 小时前
dify案例分享-免费玩转 AI 绘图!Dify 整合 Qwen-Image,文生图 图生图一步到位
前端
IT_陈寒1 小时前
Redis 性能翻倍的 7 个冷门技巧,第 5 个大多数人都不知道!
前端·人工智能·后端
mCell8 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip8 小时前
Node.js 子进程:child_process
前端·javascript
excel11 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel12 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼14 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping14 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript