Vue:侦听属性

Vue:侦听属性

    • watch
    • 深度侦听
    • 异步任务


watch

Vue中,允许用户在数据改变时,做出一定的处理。

语法:

new Vue({watch:{属性名:{handler(newValue, oldValue){// 函数体}		}}
})

当一个属性被写入watch中,每当这个属性值修改,就会调用对应的handler方法,该方法的第一个参数为旧值,第二个参数为新值。

示例:

<div id="root"><button @click="num++">num加一</button>
</div><script type="text/javascript">const vm = new Vue({el:'#root',data:{num: 0},watch:{num:{handler(newValue,oldValue){console.log(oldValue, " -> ", newValue)}}}})
</script>

以上代码中,设置了一个按钮,每次点击按钮num++。在Vue实例中侦听num属性,当num的值发生改变,就会调用handler方法。

输出结果:

在这里插入图片描述

如果加上immediate: true属性,那么当整个Vue初始化时,也会调用一次侦听属性的方法:

const vm = new Vue({el:'#root',data:{num: 0},watch:{num:{immediate: true,handler(newValue,oldValue){console.log(oldValue, " -> ", newValue)}}}
})

输出结果:

在这里插入图片描述

这次多了一个undefined -> 0的过程,也就是第一次初始化data.num的过程,也触发了侦听属性。

如果侦听属性中不带有任何其他属性,只有一个handler,可以简写:

new Vue({watch:{num(newValue,oldValue){console.log(oldValue, " -> ", newValue)}}
})

也就是直接把被侦听的属性num写为一个函数,而不是一个对象。


深度侦听

当被侦听的属性是一个对象时,修改对象的属性不会触发侦听属性,只有整个对象都被替换,才会触发侦听属性。

<div id="root"><h3>a的值是:{{nums.a}}</h3><button @click="nums.a++">a+1</button><button @click="nums = {a:666,b:888}">彻底替换掉nums</button>
</div><script type="text/javascript">const vm = new Vue({el:'#root',data:{nums:{a:1,b:100}},watch:{nums:{handler(){console.log('nums changed')}}}})
</script>

以上代码中,对对象nums进行侦听,如果属性修改触发回调函数。在nums中包含a b两个属性。在两个按钮中,一个让a++,另一个直接替换掉整个nums

输出结果:

在这里插入图片描述

a的值一直添加到10,都没有触发侦听属性的回调函数。

在这里插入图片描述

替换掉整个nums,才会触发回调,输出nums changed

如果希望当任意一个属性值被修改时,都能触发对象的回调,可以添加deep: true属性:

nums:{deep:true,handler(){console.log('nums changed')}
}

这样不论对象内部有多少层嵌套,都会触发对象的侦听属性。


异步任务

绝大部分情况下,watch的任务,computed都可以完成,但是watch的功能其实比computed更加强大,比如computed无法处理异步任务。

示例:

<div id="root">姓:<input type="text" v-model="firstName"> <br/><br/>名:<input type="text" v-model="lastName"> <br/><br/>全名:<span>{{fullName}}</span> <br/><br/>
</div><script type="text/javascript">const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三'},computed: {fullName(){return this.firstName + '-' + this.lastName}}})
</script>

以上代码,是一个通过姓和名得到姓名的过程,fullName通过计算属性实现。

假设要求fullName在姓或名修改后一秒,再输出新名称,这就需要使用setTimeout创建一个异步任务:

computed: {fullName(){let namesetTimeout(()=>{name = this.firstName + '-' + this.lastName},1000);return name}
}

输出:

在这里插入图片描述

结果fullName直接不输出了,因为fullName依赖于函数返回值,但是函数返回值是name,这个变量一开始是let name,随后进入异步任务setTimeout中拿到name = this.firstName + '-' + this.lastName,不过当异步任务还没有返回,就直接return name了,这导致name = undefinedVue直接不输出。

watch就可以处理异步任务:

new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){setTimeout(()=>{this.fullName = val + '-' + this.lastName},1000);},lastName(val){setTimeout(()=>{this.fullName = val + '-' + this.lastName},1000);}}
})

firstNamelastName进行侦听,在侦听的函数内部,执行异步任务setTimeout,修改fullName。由于fullName是一个存在于data内部的变量,当一秒后异步任务执行完毕,就会修改data内的值,导致模板重新渲染,实现一秒后更新fullName的值。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/885433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

朴素贝叶斯分类器基于iris及Python手写实现

数据来源为sklean.datasets中的load_iris&#xff0c;代码如下&#xff1a; # -*- coding:utf-8 -*- import numpy as np import pandas as pd from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from sklearn.metrics import ac…

SwiftUI开发教程系列 - 第1章:简介与环境配置

1.1 SwiftUI简介 SwiftUI 是 Apple 于 2019 年推出的声明式用户界面框架&#xff0c;旨在简化 iOS、macOS、watchOS 和 tvOS 应用的 UI 开发。与 UIKit 的命令式编程方式不同&#xff0c;SwiftUI 提供了一种声明式语法&#xff0c;让开发者可以以更加直观、简洁的方式构建 UI。…

Flutter 中 Provider 的使用指南

目录 1.什么是 Provider 2.如何安装 Provider 3.基本使用方式 1.使用ChangeNotifierProvider提供状态 2.使用 Provider.of 手动读取状态 3.多Provider 的使用 4.常见的 Provider 类型 在 Flutter 开发中&#xff0c;状态管理是一个常见的需求。Provider 是 Flutter 官方…

《计算机原理与系统结构》学习系列——存储器(上)

系列文章目录 目录 存储器技术概要存储器层次cache&#xff0c;内存辅存存储器技术SRAM技术DRAM技术闪存磁盘存储器 局部性原理 高速缓存cache访存性能概念命中与缺失访存阻塞的周期数 cache基础&#xff1a;直接映射块号内存地址字段缺失缺失处理和写策略 全相联映射组相连映…

lua入门教程:type函数

在Lua中&#xff0c;type 函数是一个内置函数&#xff0c;用于返回给定值的类型。Lua 支持多种数据类型&#xff0c;包括 nil&#xff08;空值&#xff09;、boolean&#xff08;布尔值&#xff09;、number&#xff08;数字&#xff09;、string&#xff08;字符串&#xff09…

Centos 7离线安装ntpd服务

本文涉及一次Centos 7系统中离线安装ntpd对时服务的过程&#xff0c;其目的是为了在服务器运行过程中能够实时同步时间。 问题提出 某服务器需部署业务程序&#xff0c;这些程序的部署脚本是我初创的&#xff0c;后因其它事转交给其他人&#xff0c;后再因其它事又兜兜转转到了…

github高分项目 WGCLOUD - 运维实时管理工具

GitHub - tianshiyeben/wgcloud: Linux运维监控工具&#xff0c;支持系统硬件信息&#xff0c;内存&#xff0c;CPU&#xff0c;温度&#xff0c;磁盘空间及IO&#xff0c;硬盘smart&#xff0c;GPU&#xff0c;防火墙&#xff0c;网络流量速率等监控&#xff0c;服务接口监测&…

A021基于Spring Boot的自习室管理和预约系统设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600…

【GPT使用技巧】用AI出一门课

提问 我想做一个ChatGPT的课程&#xff0c;针对小白&#xff0c;解决从0到1的问题。按照小白的通点&#xff0c;列出大家最关心的问题&#xff0c;做一个课程大纲给我。避免生涩语言&#xff0c;用小白理解和关心的方式展示。 GPT的回答结果 课程大纲&#xff1a;ChatGPT入门…

【EasyExcel】EasyExcel导出表格包含合计行、自定义样式、自适应列宽

目录 0 EasyExcel简介1 Excel导出工具类设置自定义表头样式设置自适应列宽添加合计行 2 调用导出工具类导出Excel表3 测试结果 0 EasyExcel简介 在数据处理和报表生成的过程中&#xff0c;Excel是一个非常常用的工具。特别是在Java开发中&#xff0c;EasyExcel库因其简单高效而…

2024年11月09号Drawing Memory Models Review 2

So lets start with a piece of code that well be thinking about and take a few seconds to read it carefully and try to explain, in your own words, what this piece of code does.

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 (二)

【HarmonyOS】鸿蒙应用低功耗蓝牙BLE的使用心得 &#xff08;二&#xff09; 一、前言 目前鸿蒙应用的实现逻辑&#xff0c;基本都是参考和移植Android端来实现。针对BLE低功耗蓝牙来说&#xff0c;在鸿蒙化的实现过程中。我们发现了&#xff0c;鸿蒙独有的优秀点&#xff0c…

2024年【流动式起重机司机】模拟考试及流动式起重机司机证考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 流动式起重机司机模拟考试考前必练&#xff01;安全生产模拟考试一点通每个月更新流动式起重机司机证考试题目及答案&#xff01;多做几遍&#xff0c;其实通过流动式起重机司机模拟考试题很简单。 1、【多选题】( )和…

混合搜索与多重嵌入:一次有趣又毛茸茸的猫咪搜索之旅!(二)

这是继上一篇文章 “混合搜索与多重嵌入&#xff1a;一次有趣又毛茸茸的猫咪搜索之旅&#xff01;&#xff08;一&#xff09;” 的续篇。这这篇文章中&#xff0c;我们讲使用本地 Elasticsearch 部署来完成整个演示。这是一个简单的 Python Web 应用程序&#xff0c;展示了可…

【CSS】清除浮动(父元素塌陷)

在CSS布局中&#xff0c;“清除浮动”通常指的是消除由浮动元素引起的某些副作用&#xff0c;特别是当这些浮动元素影响到后续元素或者父元素的高度计算时。浮动元素会使它们脱离正常的文档流&#xff0c;这可能导致一些意料之外的效果&#xff0c;比如父元素高度塌陷&#xff…

算法【Java】—— 动态规划之路径问题

前言 本文章终点解析第一道题目【不同路径】和最后一道题目【地下城游戏】的动态规划思路&#xff0c;中间几道题目会很快过完&#xff0c;大家如果不熟悉动态规划的思路可以重点看一下这两道题目的解析。 不同路径 https://leetcode.cn/problems/unique-paths 解析&#xf…

FPGA实现串口升级及MultiBoot(五)通过约束脚本添加IPROG实例

本文目录索引 一个指令和三种方式通过约束脚本添加Golden位流工程MultiBoot位流工程验证example1总结代码缩略词索引: K7:Kintex 7V7:Vertex 7A7:Artix 7MB:MicroBlaze上一篇文章种总结了MultiBoot 关键技术,分为:一个指令、二种位流、三种方式、四样错误。针对以上四句话我…

jmeter基础02_下载安装jmeter

&#xff08;安装包windows、mac、Linux通用&#xff09; Step1. 官网下载 官网地址&#xff1a;https://jmeter.apache.org/download_jmeter.cgi 官网可见最新版本的jmeter和要求的jdk版本&#xff0c;先说结论&#xff1a;建议下载Binaries-zip格式包即可。 安装包有2大类&am…

Spring Boot环境下的知识分类与检索

2 开发技术 2.1 VUE框架 Vue.js&#xff08;读音 /vjuː/, 类似于 view&#xff09; 是一套构建用户界面的渐进式框架。 Vue 只关注视图层&#xff0c; 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 2.2 Mysql数据库 …

【Threejs】相机控制器动画

使用场景 官方提供了一个基于目标点、刷新速度&#xff0c;在每次renderer中执行的动画&#xff0c;但实际开发中你可能会需要基于设定时间、目标点添加动画&#xff0c;并且有更多自定义成分的方式 获取当前状态下控制器和相机的姿态 getVisionCof() {let { controls } thi…