vue3.0中的watch侦听器实例详解

目录
  • 前言
    • 侦听器和计算属性的区别
  • vue3如何使用watch呢？
    • 基本使用
    • 监听多个响应式数据
  • 侦听reactive定义的响应式数据
    • 监听reactive定义的响应式数据的某一个属性
    • 配置选项用法
  • 总结

前言

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

侦听器和计算属性的区别

计算属性里不可以做异步操作，侦听器可以做异步操作，相当于计算属性的升级版

vue3如何使用watch呢？

基本使用

<template>
  <h1>watch侦听器页面</h1>
  <p>普通侦听数据:{{ num }}</p>
  <button @click="butFn">点击</button>
</template>

script

import { ref, watch } from 'vue'
// 记得用到什么就要导入什么vue3的新特性，按需调用
 setup() {

    const num = ref(0)
    // watch(要侦听的数据,回调函数)
    watch(num, (v1, v2) => {
      // v1 是改变以后的新值
      // v2 是改变前的值
      console.log(v1, v2)
      // 要点：侦听普通函数可以获取修改前后的值，被侦听的数据必须是响应式的
    })

    // 单机事件
      const butFn = () => {
      num.value++
    }

     return { butFn, num }
}

监听多个响应式数据

    const num = ref(0)
    const num2 = ref(20)

    watch([num, num2], (v1, v2) => {
      // 存入的结果是一个数组，结果返回的也是一个已数组格式的结果
      // v1是最新结果的数组
      // v2是旧数据的数组
      console.log('v1', v1, 'v2', v2)
    // 总结：可以得到更新前后的值，侦听的结果也是数组数据顺序一致
    })

侦听reactive定义的响应式数据

	const obj = reactive({
      msg: '奇奇怪怪可可爱爱'
    })

   watch(obj, () => {
      // 只能获取到最新的值
      console.log(obj.msg)
    })

总结：如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时也可以直接读取被侦听的对象，那么得到的值也是最新的。

监听reactive定义的响应式数据的某一个属性

	const obj = reactive({
      msg: '奇奇怪怪可可爱爱'
    })

	watch(() => obj.msg,(v1, v2) => {
        // v1 就是被监听数据的最新值
        // v2 就是被监听数据的原有值
        console.log(v1, v2)
        // 总结：如果侦听对象中当个属性，需要使用箭头函数的方式
        // 侦听更少的数据有利于提高性能
      }
    )

配置选项用法

   const obj = reactive({
      msg: {
        info: 'ooo'
      }
    })
   watch(() => obj.msg,(v1, v2) => {
        console.log(v1, v2)
      },
      {
        // 首次渲染组件就触发一次
        immediate: true,
        // 开启深度监听,对象里面的数据如果发生变化也会被侦听到
        // 如果监听的数据是一个比较长的表达式，那么需要用一个函数的方式
        // 但是写成函数形式之后，里层的数据变化不到，所以需要添加deep选项
        deep: true
      }
    )

总结

到此这篇关于vue3.0中watch侦听器实例详解的文章就介绍到这了,更多相关vue3.0 watch侦听器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue.js中关于侦听器（watch）的高级用法示例

    Vue侦听器watch 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的.例如: <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> &l

  • Vue 2.0 侦听器 watch属性代码详解

    用法 -------------------------------------------------------------------------------- 先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的表达式(函数),还可以是一个对象,可以包含如下几个属性: handler        ;对应的函数                          ;可以带两个参数,分别是新的值

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

  • 详解Vue3中的watch侦听器和watchEffect高级侦听器

    目录 1watch侦听器 2watchEffect高级侦听器 清除副作用:就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖 停止跟踪 watchEffect 返回一个函数 调用之后将停止更新 1watch侦听器 watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用 watch第一个参数监听源 watch第二个参数回调函数cb(newVal,oldVal) watch第三个参数一个options配置项是一个对 { immediate:true //是否立即调用一次 deep:t

  • python中函数总结之装饰器闭包详解

    1.前言 函数也是一个对象,从而可以增加属性,使用句点来表示属性. 如果内部函数的定义包含了在外部函数中定义的对象的引用(外部对象可以是在外部函数之外),那么内部函数被称之为闭包. 2.装饰器 装饰器就是包装原来的函数,从而在不需要修改原来代码的基础之上,可以做更多的事情. 装饰器语法如下: @deco2 @deco1 def func(arg1,arg2...): pass 这个表示了有两个装饰器的函数,那么表示的含义为:func = deco2(deco1(func)) 无参装饰器语法如下:

  • AngularJS中的拦截器实例详解

    AngularJS中的拦截器实例详解 异步操作 有时候需要在拦截器中做一些异步操作.幸运的是, AngularJS 允许我们返回一个 promise 延后处理.它将会在请求拦截器中延迟发送请求或者在响应拦截器中推迟响应. 下面是项目中用到的代码. ZbtjxcApp.factory('myHttpInterceptor', ['$q', '$window','$location', function($q, $window,$location) { return { // 全局响应 'respo

  • IOS中计算缓存文件的大小判断实例详解

    IOS中计算缓存文件的大小判断实例详解 IOS中计算缓存文件的大小判断,在这里分享一下自己的心得,希望和大家一起分享技术,如果有什么不足,还请大家指正.写出这篇目的,就是希望大家一起成长,我也相信技术之间没有高低,只有互补,只有分享,才能使彼此更加成长. 实例代码: //获取缓存文件路径 -(NSString *)getCachesPath{ // 获取Caches目录路径 NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCaches

  • 对python中if语句的真假判断实例详解

    说明 在python中,if作为条件语句,当if后面的条件参数为真时,则执行后面的语句块,反之跳过,为了深入理解if语句,我们需要知道if语句的真假判断方式. 示例 在python交互器中,经过测试发现以下条件均为假,相当于False In [2]: if '': ...: print('ok') ...: In [3]: if 0: ...: print('ok') ...: In [4]: if None: ...: print('ok') ...: In [5]: if []: ...:

  • 对python中GUI,Label和Button的实例详解

    如下所示: #coding=utf-8 import Tkinter top=Tkinter.Tk() #400x300:代表初始化时主窗口的大小,300,100分别代表窗口的初始化位置 #x:为小写的x top.geometry('400x300+300+100') #创建一个文本框,里面内容为"hello world" lab=Tkinter.Label(top,text='hello world') #布局方式 lab.pack() #创建一个按钮 button=Tkinter.

  • 对Django中内置的User模型实例详解

    User模型 User模型是这个框架的核心部分.他的完整的路径是在django.contrib.auth.models.User. 字段 内置的User模型拥有以下的字段: 1.username: 用户名.150个字符以内.可以包含数字和英文字符,以及_.@.+..和-字符.不能为空,且必须唯一! 2.first_name:歪果仁的first_name,在30个字符以内.可以为空. 3.last_name:歪果仁的last_name,在150个字符以内.可以为空. 4.email:邮箱.可以为空

  • C++ 中引用与指针的区别实例详解

    C++ 中引用与指针的区别实例详解 引用是从C++才引入的,在C中不存在.为了搞清楚引用的概念,得先搞明白变量的定义及引用与变量的区别,变量的要素一共有两个:名称与空间. 引用不是变量,它仅仅是变量的别名,没有自己独立的空间,它只符合变量的"名称"这个要素,而"空间"这个要素并不满足.换句话说,引用需要与它所引用的变量共享同一个内存空间,对引用所做的改变实际上是对所引用的变量做出修改.并且引用在定义的时候就必须被初始化.     参数传递的类型及相关要点: 1 按值

  • SQLserver中cube：多维数据集实例详解

    1.cube:生成多维数据集,包含各维度可能组合的交叉表格,使用with 关键字连接 with cube 根据需要使用union all 拼接 判断 某一列的null值来自源数据还是 cube 使用GROUPING关键字 GROUPING([档案号]) = 1 : null值来自cube(代表所有的档案号) GROUPING([档案号]) = 0 : null值来自源数据 举例: SELECT * INTO ##GET FROM (SELECT * FROM ( SELECT CASE WHEN

随机推荐