Vue 监听状态 watch 与监听状态 watchEffect

监听状态 watch

watch 函数用于监听响应式数据的变化。


使用 watch 函数监听基于 ref 创建的响应式数据 (基本数据类型)。

import { ref, watch } from "vue"
export default {setup() {const text = ref("")watch(text, (current, previous) => {console.log("current", current)console.log("previous", previous)})return { text }},
}
<template><input type="text" v-model="text" />
</template>
<template><input type="text" v-model="text" />
</template>

使用 watch 监听基于 ref 创建的响应式数据 (引用数据类型)。

import { ref, watch } from "vue";
​
export default {name: "App",setup() {const person = ref({ name: "张三" });watch(person.value, (current) => {console.log(current);});},
};
<template><button @click="onClickHandler">{{ person.name }}</button>
</template>

使用 watch 监听响应式数据内部的具体属性 (基本数据类型)

import { ref, watch } from "vue";
​
export default {name: "App",setup() {const person = ref({ name: "张三" });watch(() => person.value.name,(current) => {console.log(current);});return { person };},
};

使用 watch 监听响应式数据内部的具体属性 (引用数据类型)

<template><p>{{ person.brand.title }} {{ person.name }}</p><button @click="changeBrandTitle">title</button><button @click="changeName">name</button>
</template>
​
<script>
import { ref, watch } from "vue";
export default {name: "App",setup() {const person = ref({ brand: { title: "宝马" }, name: "张三" });const changeBrandTitle = () => {person.value.brand.title = "奔驰";};const changeName = () => {person.value.name = "李四";};watch(person.value.brand, (current) => {console.log(current);});return { person, changeBrandTitle, changeName };},
};
</script>

使用 watch 监听基于 reactive 创建的响应式数据。

import { reactive, watch } from "vue"
export default {setup() {const person = reactive({ name: "张三" })const onClickHandler = () => {person.name = "李四"}watch(person, (current, previous) => {console.log(current)})return { person, onClickHandler }},
}
<template>{{ person.name }}<button @click="onClickHandler">button</button>
</template>

使用 watch 监听多个值的变化import { ref, watch } from "vue"
export default {setup() {const firstName = ref("")const lastName = ref("")watch([firstName, lastName], current => {console.log(current)})return { firstName, lastName }},
}
<template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

使 watch 监听数据在初始时执行一次

import { ref, watch } from "vue"
export default {setup() {const firstName = ref("hello")const lastName = ref("world")watch([firstName, lastName],current => {console.log(current)},{immediate: true,})return { firstName, lastName }},
}

监听状态 watchEffect

watchEffect 和 watch 一样,都是用于监听响应式数据的变化。

区别(重点)

watchEffect 只关心数据的最新值,不关心旧值是什么,而且 watchEffect 默认会在初始时执行一次。

import { ref, watchEffect } from "vue";export default {name: "App",setup() {const firstName = ref("");const lastName = ref("");watchEffect(() => {console.log(firstName.value);console.log(lastName.value);});return { firstName, lastName };},
};
<template><input type="text" v-model="firstName" /><input type="text" v-model="lastName" />
</template>

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

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

相关文章

javascript2

文章目录 一、 内置对象1&#xff09; 对象2&#xff09; Array 数组1. 创建2. 特点3. 属性和方法4. 二维数组 3&#xff09;String 对象1. 创建2. 特点3. 属性4. 方法 4) Math 对象1. 定义2. 属性3. 方法 5&#xff09;日期对象1. 创建日期对象2. 日期对象方法 1. 创建日期对象…

结构体--高考数组

高考数组 高考数组 题意 求给定N组数组的平均值并输出最大的两个 思路 先求出其平均值再结构体进行比较&#xff0c;输出前两个最大值 算法一&#xff1a;结构体 实现步骤 定义结构体&#xff0c;进行平均值的比较&#xff0c;给数据定义下标&#xff0c;sort进行递增排序&a…

c++ 重写 重构 重载

特性重写&#xff08;Override&#xff09;重构&#xff08;Refactoring&#xff09;重载&#xff08;Overloading&#xff09;定义在派生类中提供与基类同名同参数的新方法实现改进代码内部结构但不改变外在行为在同一作用域内创建多个参数列表不同的同名函数目的实现多态&…

(2)llvm解析器和抽象语法树

解析器的输出是抽象语法树 对于数字字面量&#xff0c;创造了一个实例&#xff0c;并捕捉 变量捕捉函数名&#xff1b;二元表达式捕捉运算符&#xff1b;函数调用捕捉函数名和函数调用参数 函数原型和函数定义 构建语法树 getNextToken会从输入流里拿一个token&#xff0c;Cur…

克魔助手:方便查看iPhone应用实时日志和奔溃日志工具

查看ios app运行日志 摘要 本文介绍了一款名为克魔助手的iOS应用日志查看工具&#xff0c;该工具可以方便地查看iPhone设备上应用和系统运行时的实时日志和奔溃日志。同时还提供了奔溃日志分析查看模块&#xff0c;可以对苹果奔溃日志进行符号化、格式化和分析&#xff0c;极…

MSVC++ 编译 module std

环境&#xff1a;windows 10 19045.xxxx 只安装了MSVC C 工具链和一个版本的SDK&#xff0c;SDK版本建议选一个和本机系统匹配的。 cd %USERPROFILE%\source\repos\STLModules mkdir x86 mkdir x64 打开“x86 Native Tools Command Prompt for VS 2022”控制台&#xff0c;…

【mac-m1 docker 安装upload-labs靶场】

1.搜索upload-labs docker search upload-labs 2.下载upload-labs docker pull c0ny1/upload-labs 3.启动 docker run -it -d --name uploadlabs -p 80:80 c0ny1/upload-labs --platform linux/amd64 4.访问127.0.0.1:80

java设计模式学习之【备忘录模式】

文章目录 引言备忘录模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用备忘录示例代码地址 引言 想象一下&#xff0c;你正在编辑一篇重要的文档&#xff0c;突然你意识到最近的一些更改实际上破坏了文档的结构。幸运的是&#xff0c;你的文本编辑器允许你撤…

哈希桶的模拟实现【C++】

文章目录 哈希冲突解决闭散列 &#xff08;开放定址法&#xff09;开散列 &#xff08;链地址法、哈希桶&#xff09;开散列实现&#xff08;哈希桶&#xff09;哈希表的结构InsertFindErase 哈希冲突解决 闭散列 &#xff08;开放定址法&#xff09; 发生哈希冲突时&#xf…

FreeBSD下安装Jenkins(软件测试集成工具)记录

简要介绍Jenkins 简而言之&#xff0c;Jenkins 是领先的开源自动化服务器。它使用 Java 构建&#xff0c;提供了 1,800 多个插件来支持几乎任何事情的自动化&#xff0c;因此人类可以将时间花在机器无法完成的事情上。 主要目的&#xff1a; 持续、自动地构建/测试软件项目。…

【MyBatis-Plus】进阶之乐观锁、悲观锁逻辑删除分页和查询构造器的使用

目录 一、乐观锁、悲观锁 1、什么是乐观锁和悲观锁 ①乐观锁&#xff08;Optimistic Locking&#xff09;: ②悲观锁&#xff08;Pessimistic Locking&#xff09;: ③实现方式 2、乐观锁和悲观锁的区别 ①乐观锁&#xff08;Optimistic Locking&#xff09; ②悲观锁&…

MySQL ORDER BY(排序) 语句-读取的数据进行排序

MySQL ORDER BY(排序) 语句 我们知道从 MySQL 表中使用 SELECT 语句来读取数据。 如果我们需要对读取的数据进行排序&#xff0c;我们就可以使用 MySQL 的 ORDER BY 子句来设定你想按哪个字段哪种方式来进行排序&#xff0c;再返回搜索结果。 MySQL ORDER BY(排序) 语句可以…

Educational Codeforces Round 124 (Rated for Div. 2) (D 边缘点bfs推答案 C贪心)

A&#xff1a;第一轮剩下的都是奇数&#xff0c;后面全是奇数了&#xff0c;说明两个数相加永远都是偶数&#xff0c;最后答案是最大的那个奇数 #include<bits/stdc.h> using namespace std; const int N 1e610,mod998244353; #define int long long typedef long long…

【CSAPP】探究BombLab奥秘:Phase_2的解密与实战

&#x1f4cb; 前言 ​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《斯坦福大学之CSAPP》⏰诗赋清音&#xff1a;桃花灼灼春风暖&#xff0c;心随乐曲扬徐徐。 苦尽甘来梦未阑&#xff0c;岁月长河任舟游。 ​ &#x1f389;欢迎…

消息队列基础知识

学一点&#xff0c;整一点&#xff0c;基本都是综合别人的&#xff0c;弄成我能理解的内容 https://blog.csdn.net/BenJamin_Blue/article/details/125946812 https://blog.csdn.net/qq_46119575/article/details/129794304 &#x1f4cc;导航小助手&#x1f4cc; 生产者-消费者…

uniapp怎么存储用户登录的所有数据?

在登录页面请求成功的地方使用uni.setStorageSync方法 uni.setStorageSync(userinfo, res.data.data); 怎么取 在要用的页面的onLoad周期里面 const res uni.getStorageSync(userinfo); 怎么用 需要用到哪一个东西 就在header里面接收哪个参数 header: {token: this.user…

SAP FIORI 初步了解

1、对网上存在的部分资料进行收集 一套适合 SAP UI5 开发人员循序渐进的学习教程 SAP Fiori 的学习路线指南 如何根据角色批量激活SAP Fiori服务 关于S/4和Fiori&#xff0c;你必须知道的10件事 SAP Fiori开发教程 SAP FIORI教程 面向ABAP开发人员&#xff0c;SAPUI5 Fiori开发…

【C语言】初识C语言

本章节主要目的是基本了解C语言的基础知识&#xff0c;对C语言有一个大概的认识。 什么是C语言 在日常生活中&#xff0c;语言就是一种人与人之间沟通的工具&#xff0c;像汉语&#xff0c;英语&#xff0c;法语……等。而人与计算机之间交流沟通的工具则被称为计算机语言&am…

Redis中RDB和AOF

Redis中RDB和AOF 定时间间隔执行数据集的时间快照&#xff0c;把某一时刻数据和妆容以文件的形式写到磁盘上&#xff0c;也就是快照。 配置文件 如果是普通安装方式可以跳过&#xff0c;如果是docker安装&#xff0c;需要到官网下载redis.conf配置文件到本地&#xff0c;地址…