Vue3.0 watch和watchEffect监听器:VCA

这篇具有很好参考价值的文章主要介绍了Vue3.0 watch和watchEffect监听器:VCA。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

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

1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; 2.immediate:true,代表watch里面声明了之后会立马执行handler里面的函数文章来源地址https://www.toymoban.com/news/detail-740594.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>

到了这里,关于Vue3.0 watch和watchEffect监听器:VCA的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3监听器使用

    watch(监听的对象或值, 回调函数(参数新值,旧值), 配置项是对象={   immediate: true//立即监听--进入就会执行一次 deep:true //深度监听 }) 首先引入 设置响应式数据 设置点击事件,点击触发修改num 监听简单数据类型----- immediate: true//立即监听--进入就会执行一次 ---------------

    2024年02月07日
    浏览(40)
  • Vue3:计算属性、监听器

    计算属性是指 基于现有状态派生 (演变) 出新的状态,现有状态发生变化,派生状态重新计算。 computed 接收回调函数作为参数,基于回调函数中使用的响应式数据进行计算属性的创建,回调函数的返回值就是基于现有状态演变出的新状态。 完整写法 案例:动态显示名字。

    2024年02月09日
    浏览(85)
  • watch监听器三种监听方式

    1、普通监听( 无法监听到第一次绑定的变化 ) 这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。 2、普通监听( 可以监听到第一次绑定的变化) 给 text 绑定了一个handler方法,之前我们写的 watch 方法其实默认写的就是

    2024年02月15日
    浏览(39)
  • vue全家桶进阶之路32:Vue3 WatchEffect和watch 监听

    在 Vue 3 中, watchEffect 是一个用于监听响应式数据变化的 API。它可以在函数内部自动跟踪数据的依赖,并在依赖变化时重新运行函数。 watchEffect  的作用以及各个参数的功能讲解: watchEffect(effect: (onInvalidate: InvalidateCbRegistrator) = void | (() = void) | Promisevoid, options?: WatchEffectOptio

    2023年04月17日
    浏览(73)
  • Vue Composition API之侦听器watch/watchEffect

    在日常的开发中,很多时候我们需要去对一些状态进行监听,比如当显示学生的成绩列表时,我们使用一个学生的学号student_num作为请求成绩的参数,如果没有监听机制,当学号student_num改变时,我们需要依赖用户的操作去刷新成绩。但是有了侦听器,我们可以通过侦听器去监

    2024年02月08日
    浏览(41)
  • 微信小程序 - 最新超详细 watch 侦听器功能,支持监听对象、数组及各种复杂对象数据,可在任意页面或组件中使用(绝非网上千篇一律的 “setWatcher“ 不能监听对象的垃圾方法,方案开箱即用)

    网上的教程全都是一摸一样的 setWatcher(this) 方案,重要的是这种方案不能监听对象,可以说一无是处。 本文 在微信小程序中实现 watch 监听器监听数据的功能,让小程序拥有 watch 监听对象、数组等复杂数据变化的能力, 您按照教程几分钟就能搞定,保证 100% 好用且使用方法

    2024年02月11日
    浏览(101)
  • Vue2(生命周期,列表排序,计算属性和监听器)

    前言 上一章博客我们讲解了Vue基础 这一章我们来讲Vue生命周期,列表过滤,计算属性和监听器 一,生命周期 通常也叫生命周期回调函数、生命周期函数、生命周期钩子 vue初始化时在不同的阶段调用的不同函数 生命周期函数的 this 指向为vue实例,名字不能更改 1.1,生命周期函

    2024年02月13日
    浏览(48)
  • 【三十天精通Vue 3】第六天 Vue 3 计算属性和监听器详解

    ✅创作者:陈书予 🎉个人主页:陈书予的个人主页 🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区 🌟专栏地址: 三十天精通 Vue 3

    2024年02月16日
    浏览(39)
  • vue3 watch & watchEffect

    watch watchEffect 函数都是监听器, 用于监视数据的变化; watch 有惰性,watchEffect 无惰性;watch 需要指定具体的监视属性,watchEffect 不需要指定具体的监视属性和配置参数,会自动感知代码依赖;watch 能获取到以前的旧值和新值,watchEffect 只能拿到最新值 一、watch 监听 1、watch 监视

    2024年02月09日
    浏览(45)
  • [vue3] watch和watchEffect简记

    watch函数的第一个参数是监听的数据源,可以是: ref和computed创建的响应式数据; reactive创建的响应式对象; getter函数; 多个数据源组成的数组; 注 : 响应式对象的属性需要使用getter监听。 当数据源是响应式对象时,其属性的变更会触发回调函数,但是接收到的 newValue 和

    2024年02月06日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包