vue3 watch学习

watch的侦听数据源类型

watch的第一个参数为侦听数据源,有4种"数据源":

ref(包括计算属性)

reactive(响应式对象)

getter函数

多个数据源组成的数组。

//ref
const x=ref(0)//单个ref
watch(x,(newX)=>{console.log(`x is ${newX}`)
})
//getter函数
const x = ref(0)
watch(
()=> x.value,
(newX)=>{console.log(`x is ${newX}`)}
)//getter函数const obj = reactive({count:0})
watch(
()=> obj.count,
(count)=>{console.log(`count is ${count}`)}
)
//reactive  隐式创建一个深层侦听器const obj = reactive({count:0});
watch(obj,
(newV,olbV)=>{// 在嵌套的属性变更时触发// 注意:`newV` 此处和 `oldV` 是相等的// 因为它们是同一个对象!},
)//或者
watch(
()=>obj.count,
()=>{// 仅当 obj.count被替换时触发}
)
// 多个来源组成的数组
const x=ref(0)
const y=ref(0)watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
})

watch属性:

{ deep: true }  //强制转成深层侦听器,

深度侦听需要遍历被侦听对象中的所有嵌套的属性,当用于大型数据结构时,开销很大。因此请只在必要时才使用它,并且要留意性能。

{ immediate: true } //强制侦听器回调立即执行

{ once: true } // 3.4+,回调只在源变化时触发一次

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

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

相关文章

Python库之Scrapy-Redis的高级用法深度解析

Python库之Scrapy-Redis的高级用法深度解析 引言 Scrapy-Redis作为Scrapy框架的扩展库,不仅支持基本的分布式爬取功能,还提供了一系列的高级用法,使得爬虫的开发和维护更加灵活和高效。本文将深入探讨Scrapy-Redis的高级用法,帮…

python实训——回归类型数据挖掘任务

回归类型数据挖掘任务 基于ARIMA和多层神经网络模型的地铁站点日客流量预测。有郑州市2015年8月-11月各地铁闸机刷卡数据集。对每日各地铁站的客流量进行分析并进行可视化。基于上一步的分析结果,分别采用ARIMA模型和多层神经网络模型对数据进行建模,训…

Usage - hackthebox

简介 靶场:hackmyvm 靶机:Usage(10.10.11.18) 难度:Easy 靶机链接:https://app.hackthebox.com/machines/Usage 攻击机1:ubuntu22.04 (10.10.16.21) 攻击机2:windows11(10.10.14.33) 扫描 nmap起手 nmap -sT …

Centos7.9环境下keepalived结合nginx实现负载均衡的高可用(亲测版)

目录 一、负载均衡高可用解释 二、安装 三、Nginx检查脚本创建 四、修改keepalived配置文件 一、负载均衡高可用解释 nginx 作为负载均衡器,所有请求都到了nginx,如果nginx服务器宕机后端web服务将无法提供服务,影响严重。这样nginx作为负…

大一C语言课设 服装销售系统 代码实现与项目总结

问题分析 服装信息管理及销售管理系统。方便对库存服装的信息管理和添加新服装数据,同时兼具库存数量管理功能。 功能实现 1、建立服装信息库,包括:服装代码、型号、规格、面料、颜色、单价、数量; 2、建立销售信息库&#xff…

lua拼接字符串

在Lua中,拼接字符串可以使用多种方法,包括使用..操作符、string.format函数,或者使用循环和table.concat函数。下面是一些常见的字符串拼接示例: 使用..操作符 local part1 "Hello" local part2 "World" lo…

类和对象(中)【类的6个默认成员函数】 【零散知识点】 (万字)

类和对象(中) 1.类的6个默认成员函数 如果一个类中什么成员都没有,简称为空类。 空类中真的什么都没有吗?并不是,任何类在什么都不写时,编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1…

【Python】如何使用 Python 自动发送每日电子邮件报告

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

整合Spring Boot 框架集成Knife4j

本次示例使用Spring Boot作为脚手架来快速集成Knife4j,Spring Boot版本2.3.5.RELEASE ,Knife4j版本2.0.7 POM.XML完整文件代码如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0…

智能合约引领:探索Web3的商业革新之路

随着区块链技术的迅速发展&#xff0c;智能合约作为其重要应用之一&#xff0c;正在逐步改变着商业世界的格局。Web3作为下一代互联网的代表&#xff0c;正引领着智能合约在商业领域的广泛应用和创新。本文将深入探讨智能合约在Web3中的作用&#xff0c;以及智能合约如何引领着…

【正在线上召开】2024机器智能与数字化应用国际会议(MIDA2024),免费参会

【ACM出版】2024机器智能与数字化应用国际会议&#xff08;MIDA2024&#xff09; 2024 International Conference on Machine Intelligence and Digital Applications 【支持单位】 宁波财经学院 法国上阿尔萨斯大学 【大会主席】 Ljiljana Trajkovic 加拿大西蒙菲莎大…

【JavaScript脚本宇宙】跨越边界:挖掘JavaScript验证库的无限可能

引领技术潮流&#xff1a;六大顶级JavaScript验证库解析 前言 在现代编程中&#xff0c;数据验证是一个非常重要的环节。本文将探索六种不同的JavaScript数据验证库&#xff0c;分别介绍它们的概述&#xff0c;主要特性&#xff0c;使用示例和使用场景。 欢迎订阅专栏&#x…

PHP身份证真假API在线文档、身份证ocr识别、身份证三要素人像核验

翔云PHP身份证真假API文档&#xff0c;为开发者提供了一个详尽的操作指南和接口说明。通过简洁明了的文档&#xff0c;开发者可以轻松集成身份证验证功能到各类网站或应用程序中&#xff0c;无需从零开始编写复杂的验证逻辑&#xff0c;大大缩短了开发周期&#xff0c;降低了技…

使用画图工具修改图片文字

方法思路&#xff1a; 使用背景色将需要修改的文字覆盖&#xff0c;然后在原来的地方加入修改后的字。 第一步&#xff1a; 选中图片后右键&#xff0c;选择“编辑”&#xff08;默认会使用画图工具打开&#xff09; 第二步&#xff1a; 选取颜色选取器&#xff0c;如下图 使…

cpprestsdk https双向认证小测

概述 因项目需要在系统中引入https双向认证&#xff0c;由于程序使用C/C和cpprestsdk库编写&#xff0c;从网上经过一顿检索折腾&#xff0c;总算测试通过&#xff0c;故而博文记录用以备忘。 系统环境 Ubuntu 22.04.3 LTS libcpprest-dev&#xff08;jammy,now 2.10.18-1bu…

【Text2SQL 论文】DIN-SQL:分解任务 + 自我纠正 + in-context 让 LLM 完成 Text2SQL

论文&#xff1a;DIN-SQL: Decomposed In-Context Learning of Text-to-SQL with Self-Correction ⭐⭐⭐⭐ NeurIPS 2023, arXiv:2304.11015 Code: Few-shot-NL2SQL-with-prompting | GitHub 文章目录 一、论文速读1.1 Schema Linking Module1.2 Classification & Decompo…

【每日刷题】Day52

【每日刷题】Day52 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 2965. 找出缺失和重复的数字 - 力扣&#xff08;LeetCode&#xff09; 2. 350. 两个数组的交集 II …

kaggle竞赛系列基于图像对水稻分类代码案例

目录 依赖环境 代码 导入依赖包 定义数据集路径&#xff1a; 创建训练集、验证集和测试集的文件夹&#xff1a; 代码的作用&#xff1a; 设置新的数据集路径与类别名称 代码的作用&#xff1a; 定义数据预处理和增强变换&#xff1a; 代码的作用&#xff1a; 定义数…

【源码】多语言H5聊天室/thinkphp多国语言即时通讯/H5聊天室源码/在线聊天/全开源

多语言聊天室系统&#xff0c;可当即时通讯用&#xff0c;系统默认无需注册即可进入群聊天&#xff0c;全开源 【海外聊天室】多语言H5聊天室/thinkphp多国语言即时通讯/H5聊天室源码/在线聊天/全开源 - 吾爱资源网

每日5题Day13 - LeetCode 61 - 65

每一步向前都是向自己的梦想更近一步&#xff0c;坚持不懈&#xff0c;勇往直前&#xff01; 第一题&#xff1a;61. 旋转链表 - 力扣&#xff08;LeetCode&#xff09; /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;…