Vue3 watch 监视属性

news2025/1/8 13:31:16
  • 作用:监视数据的变化(和Vue2中的watch作用一致)
  • 特点:Vue3中的watch只能监视以下四种数据
  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值(getter函数)。
  4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候,通常会遇到以下几种情况:

ref定义的基本类型

<template>
  <div class="person">
    <h2>当前求和{{ sum }}</h2>
    <button @click="changeAddOne">点击加一</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let sum = ref(0);

// 方法
function changeAddOne() {
  sum.value++;
}

// 监视 watch(谁,回调函数)
watch(sum, (newValue, oldValue) => {
  console.log('sum发生变化了', newValue, oldValue);
});
</script>

watch监视里面的ref数据不需要.value

主动停止监视:

<template>
  <div class="person">
    <h2>当前求和{{ sum }}</h2>
    <button @click="changeAddOne">点击加一</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let sum = ref(0);

// 方法
function changeAddOne() {
  sum.value++;
}

// 监视 watch(谁,回调函数)
const stopWatch = watch(sum, (newValue, oldValue) => {
  console.log('sum发生变化了', newValue, oldValue);
  if(newValue >= 10) {
    stopWatch();
  }
});
</script>

ref定义的对象数据

监视ref定义的【对象类型】数据:直接写数据名,监视的是对象的【地址值】,若想监视对象内部的数据,要手动开启深度监视。

注意:

  • 若修改的是ref定义的对象中的属性,newValueoldValue 都是新值,因为它们是同一个对象。
  • 若修改整个ref定义的对象,newValue 是新值, oldValue 是旧值,因为不是同一个对象了。
<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect } from 'vue'

// 数据
let person = ref({
  name: '张三',
  age: 18
});
// 方法
function changeAge() {
  person.value.age++;
}

// 监视 watch(谁,回调函数)
// 监视的是对象的地址值,若想监视对象内部的属性,需要手动开启深度监视 - deep: true
watch(person, (newVal, oldVal) => {
  console.log('watch:', newVal, oldVal);
}, {deep: true, immediate: true});
</script>

watch的参数:

  • 第一个参数:被监视的数据
  • 第二个参数:监视的回调
  • 第三个监视:配置对象(deep, imediate)

reactive定义的对象数据

reactive默认监视开启深度监视。

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18
});
// 方法
function changeAge() {
  person.age++;
}

// 监视 watch(谁,回调函数)
// 默认开始深度监视 
watch(person, (newVal, oldVal) => {
  console.log('watch:', newVal, oldVal);
}, {immediate: true});
</script>

监视ref/reactive定义的对象类型中某一个属性

监视refreactive定义的【对象类型】数据中的某个属性,注意点如下:

  1. 若该属性值不是【对象类型】,需要写成函数形式。
  2. 若该属性值是依然是【对象类型】,可直接编,也可写成函数,建议写成函数。

结论:监视的要是对象里的属性,那么最好写函数式,注意点:若是对象监视的是地址值,需要关注对象内部,需要手动开启深度监视。

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车:{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁,回调函数)
// 默认开始深度监视 
watch(() => {
  return person.age
}, (newVal, oldVal) => {
  console.log('age:', newVal, oldVal);
});
</script>
<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车:{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁,回调函数)
// 默认开始深度监视 
watch(() => {
  return person.car
}, (newVal, oldVal) => {
  console.log('car:', newVal, oldVal);
}, {deep:true});
</script>

多个数据?

<template>
  <div class="person">
    <h2>Person</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">年龄+1</button>
    <p>车:{{ person.car.c1 }}</p>
    <button @click="changeCarC1">修改第一量车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { computed,watch, ref, watchEffect, reactive } from 'vue'

// 数据
let person = reactive({
  name: '张三',
  age: 18,
  car:{
    c1:'宝马',
    c2:'奔驰'
  }
});
// 方法
function changeAge() {
  person.age++;
}
function changeCarC1() {
  person.car.c1 += '---';
}
// 监视 watch(谁,回调函数)
// 默认开始深度监视 
watch(() => {
  return [person.car, person.age]
}, (newVal, oldVal) => {
  console.log('car:', newVal, oldVal);
}, {deep:true});
</script>

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

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

相关文章

2024 第一次周赛

A: 题目大意 骑士每连续 i 天每天会得到 i 个金币&#xff0c;&#xff08;i 1&#xff0c; 2&#xff0c; 3 &#xff0c; …&#xff09;,那么展开看每一天可以得到的金币数&#xff1a;1 2 2 3 3 3 4 4 4 5 5 5 5 5 … 可以发现就是1个1 &#xff0c;2个2, 3个3…,那么我…

P20机型HW睡眠省电-调研

摘要 AI睡眠场景识别 不激进的智能管控 睡眠省电 UI 以前有单独的睡眠开关选项&#xff0c;现在没有了&#xff0c;但是智能充电模式是使用AI睡眠模式 睡眠识别 华为专利上提到的论文《BTP-A Bedtime Predicting Algorithm》 各种事件状态&#xff08;亮灭屏、alarm、主动…

《数字信号处理》学习08-围线积分法(留数法)计算z 逆变换

目录 一&#xff0c;z逆变换相关概念 二&#xff0c;留数定理相关概念 三&#xff0c;习题 一&#xff0c;z逆变换相关概念 接下来开始学习z变换的反变换-z逆变换&#xff08;z反变化&#xff09;。 由象函数 求它的原序列 的过程就称为 逆变换。即 。 求z逆变换…

RTR-Chapter8

第八章 光与颜色 光量辐射度量学光度学色度学使用RGB颜色进行渲染 从场景到屏幕HDR显示编码色调映射色调再现变换曝光 颜色分级 光量 辐射度量学 辐射度量学&#xff08;radiometry&#xff09;研究的是对电磁辐射&#xff08;electromagnetic radiation&#xff09;的测量&am…

linux线程 | 线程的控制(二)

前言&#xff1a; 本节内容是线程的控制部分的第二个小节。 主要是列出我们的线程控制部分的几个细节性问题以及我们的线程分离。这些都是需要大量的代码去进行实验的。所以&#xff0c; 准备好接受新知识的友友们请耐心观看。 现在开始我们的学习吧。 ps:本节内容适合了解线程…

开源情报(OSINT)入门:初学者指南

欢迎来到令人兴奋的开源情报 (OSINT) 世界&#xff01;如果您是该领域的新手&#xff0c;OSINT 就是收集和分析公开信息以获取见解并制作情报产品。 无论您是安全爱好者、记者还是只是对 OSINT 感兴趣&#xff0c;本入门指南都将带您了解基础知识&#xff0c;让您开始第一次&a…

MySQL进阶学习一(2024.10.07版)

2024-10-06 -------------------------------------------------------------------------------------------------------------------------------- 1.一条SQL语句是如何执行的 单进程的多线程模型 MySQL的物理目录 show global variables like "%basedir%"; …

初学Vue(3)(内置指令)

文章目录 十四、内置指令v-textv-htmlv-cloak&#xff08;没有值&#xff09;v-oncev-pre自定义指令一、定义语法二、配置对象中常用的3个问题三、备注 十四、内置指令 回顾&#xff1a; v-bind &#xff1a;单向绑定解析表达式&#xff0c;可简写为 :xxx v-model : 双向数据绑…

HTML快速入门--第一节--五个基本标签

一、网络编程的三大基石 1.1 url 统一资源定位符&#xff1a; 网址:整个互联网中可以唯一且准确的确定一个资源的位置 (url项目外) 网址:https://www.baidu.com/ https://www.baidu.com/ 协议://ip端口/项目名/页面名 协议:交通法规获取资源 ip端口 &#xff08;域名&…

安全企业邮箱优势与局限,密码策略反馈

密码策略是什么呢&#xff1f;如何设置出安全可靠的密码策略呢&#xff1f;企业邮箱安全始于密码策略&#xff0c;包括复杂性、长度、更新频率、重用限制和两步验证。实施需全员培训、密码管理工具、审计与监控。一文为你详细介绍密码策略。 一、如何设置好的密码策略&#xff…

【JavaScript】JavaScript开篇基础(3)

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…

【微信小程序_11_全局配置】

摘要:本文介绍了微信小程序全局配置文件 app.json 中的常用配置项,重点阐述了 window 节点的各项配置,包括导航栏标题文字、背景色、标题颜色,窗口背景色、下拉刷新样式以及上拉触底距离等。通过这些配置可实现小程序窗口外观的个性化设置,提升用户体验。 微信小程序_11_全…

总看别人写贪吃蛇,自己也来写一个吧

贪吃蛇是一个流行度非常高的游戏&#xff0c;玩法十分简单&#xff0c;从最初的方块机上就有这个游戏了&#xff0c;后来出现的手机中也是加入了这个游戏&#xff0c;无聊的时候可以打发时间玩一会。这个游戏可谓是非常的简单&#xff0c;容易上手&#xff0c;所以直到现在&…

番外篇 | 常用的激活函数汇总 | 20+种激活函数介绍及其公式、图像等

前言:Hello大家好,我是小哥谈。激活函数(Activation Function)是神经网络中的一种重要概念,用于控制神经网络中神经元的激活方式。在传统的神经网络中,激活函数被用来将神经元的输出从数值转换为可以被神经网络其他部分理解的非数值形式。激活函数通常被定义为神经元的输…

电能表预付费系统-标准传输规范(STS)(2)

5. 标准传输规格参考模型 5.1 一般付费电表功能参考图 In a single-device payment meter all the essential functions are located in a single enclosure as depicted in Figure 1 above, while in a multi-device payment meter it is possible for the TokenCarrierToMe…

Pagehelper获取total错误

前言 在使用若依框架的pagehelper时&#xff0c;给分页表设置数据的时候前端只收到了分页的那一页的数据&#xff0c;总记录数不符合要求 我想要的效果如下&#xff0c;可以实现分页&#xff0c;和显示总记录数 但是实际情况为 但是我的数据库有11条记录&#xff0c;他这里明…

【python学习】1-2 配置python系统环境变量

1.点击“我的电脑”右键&#xff0c;点击属性&#xff0c;点击“高级系统设置”&#xff0c;再点击环境变量。 2.选择“系统变量”中的Path后&#xff0c;点击编辑。 3.点击新建&#xff0c;添加如图两个路径&#xff0c;即是python安装的路径位置后&#xff0c;点击确定。

前端脚手架插件安装总结(axios,element-ui,bootstrap,echarts等)

1.打开前端项目终端 输入命令 vue ui 进入图形化界面 a.选择插件 b.选择添加插件 c.安装插件 d.完成安装

手写mybatis之完善ORM框架,增删改查操作

前言 目前这个框架中所提供的 SQL 处理仅有一个 select 查询操作&#xff0c;还没有其他我们日常常用的 insert、update、delete&#xff0c;以及 select 查询返回的集合类型数据。 其实这一部分新增处理 SQL 的内容&#xff0c;也就是在 SqlSession 需要定义新的接口&#xff…

Java 读取word , 作为私有知识库做RAG答疑

检索与生成的技术&#xff08;RAG)&#xff0c;可以提升文本精准度与企业数据相关性 检索增强生成 (RAG) 是一种技术&#xff0c;它结合了检索模型和生成模型&#xff0c;旨在通过私有或专有的数据源来辅助文本生成。在使用大模型时&#xff0c;一个常见问题是模型可能会产生“…