纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

Youyzq   2021-10-09 我要评论
想了解vue3.0中的watch侦听器实例详解的相关内容吗,Youyzq在本文为您仔细讲解vue3.0 watch侦听器的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue3.0,watch侦听器,vue中的watch监听,vue监听事件watch,下面大家一起来学习吧。

前言

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 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
      }
    )

总结


相关文章

猜您喜欢

  • python范围曲线 python绘制浅色范围曲线的代码实例

    想了解python绘制浅色范围曲线的代码实例的相关内容吗,岐伯在本文为您仔细讲解python范围曲线的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python浅色范围曲线,python范围曲线,下面大家一起来学习吧。..
  • Spring SpringMVC扫描注解类冲突 Spring和SpringMVC扫描注解类冲突的解决方案

    想了解Spring和SpringMVC扫描注解类冲突的解决方案的相关内容吗,Java小宝在本文为您仔细讲解Spring SpringMVC扫描注解类冲突的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Spring扫描注解类,SpringMVC扫描注解类,扫描注解类冲突,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.zeLdagames.net 【行业软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式