《Vue3学习手记2》

news2025/5/10 0:25:22

今天主要学习Vue3中的数据监视：
ps: 代码中的注释写的很详细，这样更有利于理解

watch

作用: 监视数据的变化(和Vue2中watch作用一致)
特点: Vue3中的watch只能监视以下四种数据:

  1. ref创建定义的数据（基本类型、对象类型）
  2. reactive定义的数据（对象类型）
  3. 函数返回一个值（getter函数）
  4. 一个包含上述内容的数组

语法： watch接收三个参数：第一个参数是监视的对象；第二个参数是执行的回调函数（回调函数会收到两个值：新值和旧值）；第三个参数是是否进行深度监视或者是否打开页面就监视

下面分情况概述：

情况一：监听ref定义的基本数据及对象数据

<template>
  <div class="app">
    <!-- <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button> -->
    <!-- ========================================================= -->
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button>
    <button @click="changeperson">点击修改全部信息</button>
  </div>
</template>

<script lang="ts" setup name="Person">
      // 知识点一：watch监视
          // 首先 引入watch
          // watch监视的是ref定义的基本响应式数据
      import {ref,watch} from "vue"
      // 数据
            // const name=ref("张三")
            // const age=ref(18)
            // // 方法
            // function changeName(){
            //   name.value+="~"
            // }
            // function changeAge(){
            //   age.value++
            // }
      // watch在vue2是配置项，在vue3中是函数。
            // 对name进行监视
            // watch(name,(newValue,oldValue)=>{
            //   console.log("name改变了",newValue,oldValue)
            // })
    // =========================================================
    // 知识点二:watch监视的是ref定义的对象数据
    const person=ref({
      name:"张三",
      age:18
    })
    function changeName(){
        person.value.name+="~"
      }
    function changeAge(){
      person.value.age++
    }
    function changeperson(){
      person.value={name:"李四",age:19}
    }
    // 对person进行监视，此时只能监视到整个person的变化，而不能检测到person里属性的变化
        // watch(person,(newValue,oldValue)=>{
        //   console.log("person改变了",newValue,oldValue)
        // })
    // 添加第三个参数，可以检测到person中属性name和age的变化
    watch(person,(newValue,oldValue)=>{
       console.log("person改变了",newValue,oldValue)
      },{deep:true,immediate:true})

// =========================================================
    // 注意：
    // 进行深度监视后，name和age属性可以被监视到。
    // 监测name和age返回的新值和旧值都是新值，因为他们是同一对象
    // 监测整个person对象返回的分别是新值和旧值，因为他们不是同一对象，因为整个person都被修改了
  
        
    
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius:10px;
    padding: 20px;
  }
</style>

情况二： 监视reactive定义的对象数据

<template>
  <div class="app">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button>
    <button @click="changeperson">点击修改全部信息</button>
  </div>
</template>

<script lang="ts" setup name="Person">
      // 知识点一：watch监视
          // 首先 引入watch
          // watch监视的是reactive定义的对象响应式数据
      import {reactive,watch} from "vue"
        const person=reactive({
          name:"张三",
          age:18
        })
        function changeName(){
            person.name+="~"
          }
        function changeAge(){
            person.age++
        }
        function changeperson(){
          Object.assign(person,{name:"李四",age:20})
        }
        // 对person进行监视，此时只能监视到整个person的变化，也能能检测到person里属性的变化（reactive对象数据，默认开启深度监视
            watch(person,(newValue,oldValue)=>{
              console.log("person改变了",newValue,oldValue)
            })

// =========================================================
    // 注意：
    // 监测name和age返回的新值和旧值(newValue和oldValue)都是新值，因为他们是同一对象
    // 监测整个person对象返回的newValue和oldValue分别是新值和旧值，因为他们不是同一对象
// =========================================================   
      //总结：  
     //reactive定义的对象数据和ref相同，都是对象中的属性 返回的新值和旧值都是新值，而整个person对象返回的newValue和oldValue分别是新值和旧值
  
        
    
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius:10px;
    padding: 20px;
  }
</style>

情况三：（函数返回一个值）监视一个getter函数

常用于监视某个属性

<template>
  <div class="app">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>汽车：{{person.car.C1}}-{{ person.car.C2 }}</h2>
    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button>
    <button @click="changeC1">点击修改C1</button>
    <button @click="changeC2">点击修改C2</button>
    <button @click="changecar">点击修改汽车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
      // 知识点一：watch监视
          // 首先 引入watch
          // watch监视:函数返回一个值(getter函数)
      import {reactive,watch} from "vue"
        const person=reactive({
          name:"张三",
          age:18,
          car:{
            C1:"柯尼塞格",
            C2:"布加迪威龙"
          }
        })
        function changeName(){
            person.name+="~"
          }
        function changeAge(){
            person.age++
        }
        function changeC1(){
          person.car.C1="奥迪"
        }
        function changeC2(){
          person.car.C2="大众"
        }
        function changecar(){
          person.car={C1:"特斯拉",C2:"小米"}   //这里注意，由于car也是一个对象，所以不用用Object assign来定义
        }
  // =========================================================
  // 要求一：只对name属性进行监视   此时需要写成getter函数(watch可以检测到getter函数),判断该属性是不是对象类型，不是对象类型，应写成函数式
        // watch(()=>{return person.name},(newValue,oldValue)=>{
        // 可简写为：
        watch(()=>person.name,(newValue,oldValue)=>{
          console.log("name改变了",newValue,oldValue)
        })
  //要求二：只对car属性进行监视   判断该属性是不是对象类型，是对象类型，应写成函数式(推荐)，也可以直接写
        watch(()=>person.car,(newValue,oldValue)=>{
          console.log("car改变了",newValue,oldValue)
        },{deep:true})
  // =========================================================
  // 总结：监视的是对象里的属性（注意：首先要满足是对象，不管是对象里的基本数据还是对象数据类型），最好都写成函数式，注意点：若是也需要监视对象内部，则需手动开启深度监视。
  
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius:10px;
    padding: 20px;
  }
</style>

情况四：监视多个数据（包含上述内容的数组）

<template>
  <div class="app">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>汽车：{{person.car.C1}}-{{ person.car.C2 }}</h2>
    <button @click="changeName">点击修改姓名</button>
    <button @click="changeAge">点击修改年龄</button>
    <button @click="changeC1">点击修改C1</button>
    <button @click="changeC2">点击修改C2</button>
    <button @click="changecar">点击修改汽车</button>
  </div>
</template>

<script lang="ts" setup name="Person">
      // 知识点一：watch监视
          // 首先 引入watch
          // watch监视:监视上述内容的数组(多个数据)
      import {reactive,watch} from "vue"
        const person=reactive({
          name:"张三",
          age:18,
          car:{
            C1:"柯尼塞格",
            C2:"布加迪威龙"
          }
        })
        function changeName(){
            person.name+="~"
          }
        function changeAge(){
            person.age++
        }
        function changeC1(){
          person.car.C1="奥迪"
        }
        function changeC2(){
          person.car.C2="大众"
        }
        function changecar(){
          person.car={C1:"特斯拉",C2:"小米"}   //这里注意，由于car也是一个对象，所以不用用Object assign来定义
        }
  // =========================================================
  // 对name属性和car对象里面的C1属性进行监视   
        watch([()=>person.name,()=>person.car.C1],(newValue,oldValue)=>{
          console.log("name和car被修改了",newValue,oldValue)
        },{deep:true})
  // 此时newValue返回的是name和car.C1返回的新值组成的数组
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius:10px;
    padding: 20px;
  }
</style>

watchEffect

watch对比watchEffect
1.都能监听响应式数据的变化，不同的是监听数据变化的方式不同
2. watch:要明确指出监视的数据,当需要监视的数据过多时，操作麻烦
3.watchEffect:不用明确指出监视的数据(函数中用到哪些属性，那就监视哪些属性)，它会自己分析。

<template>
  <div class="app">
  <h2>水温：{{temp}}</h2>
  <h2>水位：{{height}}</h2>
  <button @click="changeTemp">点击水温+10</button>
  <button @click="changeHeight">点击水位+10</button>
  </div>
</template>

<script lang="ts" setup name="Person">
      // 知识点：watchEffect监视
          // 首先 引入watchEffect
      import {ref,watch,watchEffect} from "vue"
        const temp=ref(0)
        const height=ref(10)
        function changeTemp(){
          temp.value+=10
        }
        function changeHeight(){
          height.value+=10
        }
// 要求：当水温大于60或水位大于80，向服务器发送请求
// 对水温和水位进行监视  (不是对象里的属性，可直接写)
  // =========================================================
  // 第一种写法：
      // watch([temp,height],()=>{   //value表示newValue,返回的是newTemp和newHeight组成的数组
      //   // 解构
      //   // const [newTemp,newHeight]=value
      //   // 进行判断
      //   if(temp.value>60 || height.value>80){
      //     console.log("向服务器发送请求")
      //   }
      // })
  // 第二种写法：
    // watch([temp,height],(value)=>{   //value表示newValue,返回的是temp和height的新值组成的数组
    //   // 进行判断
    //   if(value[0]>60 || value[1]>80){
    //     console.log("向服务器发送请求")
    //   }
    // })
  
    // 第三种写法：
      // watch([temp,height],(value)=>{   //value表示newValue,返回的是newTemp和newHeight组成的数组
      //   // 解构
      //   const [newTemp,newHeight]=value
      //   // 进行判断
      //   if(newTemp>60 || newHeight>80){
      //     console.log("向服务器发送请求")
      //   }
      // })
      

    // =========================================================
    // 使用watchEffect写：(直接使用，watchEffect会自己分析)，适用于监视的对象足够多的情况
    watchEffect(()=>{
      if(temp.value>60 || height.value>80){
          console.log("向服务器发送请求")
        }
    })
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius:10px;
    padding: 20px;
  }
</style>

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

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

相关文章

在pycharm中搭建yolo11分类检测系统1--PyQt5学习（一）

在pycharm中搭建yolo11分类检测系统1--PyQt5学习（一）

实验条件&#xff1a;pycharm24.3autodlyolov11环境PyQt5 如果pycharm还没有配PyQt5的话就先去看我原先写的这篇博文&#xff1a; PyQT5安装搭配QT DesignerPycharm&#xff09;-CSDN博客 跟练参考文章&#xff1a; 目标检测系列&#xff08;四&#xff09;利用pyqt5实现yo…
阅读更多...
【经验记录贴】使用配置文件提高项目的可维护性

【经验记录贴】使用配置文件提高项目的可维护性

mark一下。 整体修改前后如下&#xff1a; 课题&#xff1a; 在项目中有一个支持的文件类型的FILE_TYPE的定义&#xff0c; 这个是写死在主程序中&#xff0c;每次增加可以支持的文件类型的时候&#xff0c;都需要去修改主程序中这个FILGE_TYPE的定义。 主程序修改其实不太花时…
阅读更多...
SOME/IP中”客户端消费“及”服务端提供”的解析

SOME/IP中”客户端消费“及”服务端提供”的解析

先上结论 AREthAddConsumedEventGroup-->客户端的函数-->谁调用 Consumed函数&#xff0c;谁就是消费者 AREthAddProvidedEventGroup-->服务端的函数-->谁调用 Provided函数&#xff0c;谁就是服务端 Server 端&#xff1a;AREthAddProvidedEventGroup → 声明 &…
阅读更多...
Linux 深入浅出信号量：从线程到进程的同步与互斥实战指南

Linux 深入浅出信号量：从线程到进程的同步与互斥实战指南

知识点1【信号量概述】 信号量是广泛用于进程和线程间的同步和互斥。信号量的本质 是一个非负的整数计数器&#xff0c;它被用来控制对公共资源的访问 当信号量值大于0的时候&#xff0c;可以访问&#xff0c;否则将阻塞。 PV原语对信号量的操作&#xff0c;一次P操作使信号…
阅读更多...
Oracle数据库数据编程SQL＜9.1 数据库逻辑备份和迁移exp和imp之导出、导入＞

Oracle数据库数据编程SQL＜9.1 数据库逻辑备份和迁移exp和imp之导出、导入＞

EXP (Export) 和 IMP (Import) 是 Oracle 提供的传统数据导出导入工具，用于数据库逻辑备份和迁移。尽管在较新版本中已被 Data Pump (EXPDP/IMPDP) 取代，但在某些场景下仍然有用。 目录 一、EXP 导出工具 1. 基本语法 2. 常用参数说明 3. 导出模式 3.1 表模式导出 3.2 用…
阅读更多...
DotnetCore开源库SampleAdmin源码编译

DotnetCore开源库SampleAdmin源码编译

1.报错: System.Net.Sockets.SocketException HResult0x80004005 Message由于目标计算机积极拒绝&#xff0c;无法连接。 SourceSystem.Net.Sockets StackTrace: 在 System.Net.Sockets.Socket.AwaitableSocketAsyncEventArgs.ThrowException(SocketError error, C…
阅读更多...
.Net 9 webapi使用Docker部署到Linux

.Net 9 webapi使用Docker部署到Linux

参考文章连接&#xff1a; https://www.cnblogs.com/kong-ming/p/16278109.html .Net 6.0 WebApi 使用Docker部署到Linux系统CentOS 7 - 长白山 - 博客园 项目需要跨平台部署&#xff0c;所以就研究了一下菜鸟如何入门Net跨平台部署&#xff0c;演示使用的是Net 9 webAPi Li…
阅读更多...
PyTorch 根据官网命令行无法安装 GPU 版本 解决办法

PyTorch 根据官网命令行无法安装 GPU 版本 解决办法

最近遇到一个问题&#xff0c;PyTorch 官网给出了 GPU 版本的安装命令&#xff0c;但安装成功后查看版本&#xff0c;仍然是 torch 2.6.0cpu 1. 清理现有 PyTorch 安装 经过探索发现&#xff0c;需要同时卸载 conda 和 pip 安装的 torch。 conda remove pytorch torchvision …
阅读更多...
PHP防火墙代码,防火墙,网站防火墙,WAF防火墙,PHP防火墙大全

PHP防火墙代码,防火墙,网站防火墙,WAF防火墙,PHP防火墙大全

PHP防火墙代码,防火墙,网站防火墙,WAF防火墙,PHP防火墙大全 资源宝整理分享&#xff1a;https://www.htple.net PHP防火墙&#xff08;作者&#xff1a;悠悠楠杉&#xff09; 验证测试&#xff0c;链接后面加上?verify_cs1后可以自行测试 <?php //复制保存zzwaf.php$we…
阅读更多...
使用 Vitis Model Composer 生成 FPGA IP 核

使用 Vitis Model Composer 生成 FPGA IP 核

本文将逐步介绍如何使用 Vitis Model Composer 生成 FPGA IP 核&#xff0c;从建模到部署。 在当今快节奏的世界里&#xff0c;技术正以前所未有的速度发展&#xff0c;FPGA 设计也不例外。高级工具层出不穷&#xff0c;加速着开发进程。传统上&#xff0c;FPGA 设计需要使用硬…
阅读更多...
BERT、T5、ViT 和 GPT-3 架构概述及代表性应用

BERT、T5、ViT 和 GPT-3 架构概述及代表性应用

BERT、T5、ViT 和 GPT-3 架构概述 1. BERT&#xff08;Bidirectional Encoder Representations from Transformers&#xff09; 架构特点 基于 Transformer 编码器&#xff1a;BERT 使用多层双向 Transformer 编码器&#xff0c;能够同时捕捉输入序列中每个词的左右上下文信息…
阅读更多...
倚光科技：以创新之光，雕琢全球领先光学设计公司

倚光科技：以创新之光，雕琢全球领先光学设计公司

在光学技术飞速发展的当下&#xff0c;每一次突破都可能为众多领域带来变革性的影响。而倚光&#xff08;深圳&#xff09;科技有限公司&#xff0c;作为光学设计公司的一颗璀璨之星&#xff0c;正以其卓越的创新能力和深厚的技术底蕴&#xff0c;引领着光学设计行业的发展潮流…
阅读更多...
数据结构（六)——红黑树及模拟实现

数据结构（六)——红黑树及模拟实现

目录 前言 红黑树的概念及性质 红黑树的效率 红黑树的结构 红黑树的插入 变色不旋转 单旋变色 双旋变色 插入代码如下所示&#xff1a; 红黑树的查找 红黑树的验证 红黑树代码如下所示&#xff1a; 小结 前言 在前面的文章我们介绍了AVL这一棵完全二叉搜索树&…
阅读更多...
解决 Vue 中 input 输入框被赋值后，无法再修改和编辑的问题

解决 Vue 中 input 输入框被赋值后，无法再修改和编辑的问题

目录 需求&#xff1a; 出现 BUG&#xff1a; Bug 代码复现 解决问题&#xff1a; 解决方法1&#xff1a; 解决方法2 关于 $set() 的补充&#xff1a; 需求&#xff1a; 前段时间&#xff0c;接到了一个需求&#xff1a;在选择框中选中某个下拉菜单时&#xff0c;对应的…
阅读更多...
【差分隐私相关概念】瑞丽差分隐私（RDP）-瑞丽散度约束了贝叶斯因子后验变化

【差分隐私相关概念】瑞丽差分隐私（RDP）-瑞丽散度约束了贝叶斯因子后验变化

分步解释和答案&#xff1a; 在Rnyi差分隐私&#xff08;RDP&#xff09;框架中&#xff0c;通过贝叶斯因子和Rnyi散度的关系可以推导出关于后验变化的概率保证。以下是关键步骤的详细解释&#xff1a; 1. 贝叶斯因子的定义与分解 设相邻数据集 D D D 和 D ′ D D′&#x…
阅读更多...
前端快速入门——JavaScript函数、DOM

前端快速入门——JavaScript函数、DOM

1.JavaScript函数 函数是一段可重复使用的代码块&#xff0c;它接受输入(参数)、执行特定任务&#xff0c;并返回输出。 <scricpt>function add(a,b){return ab;}let cadd(5,10);console.log(c); </script>2.JavaScript事件 JavaScript绑定事件的方法&#xff1…
阅读更多...
10【模块学习】LCD1602（二）：6路温度显示+实时时钟

10【模块学习】LCD1602（二）：6路温度显示+实时时钟

项目&#xff1a;6路温度显示实时时钟 1、6路温度显示①TempMenu.c文件的代码②TempMenu.h文件的代码③main.c文件的代码④Timer.c文件的代码⑤Delay.c文件的代码⑥Key.c文件的代码 2、实时时钟显示①BeiJingTime.c文件的代码②BeiJingTime.h文件的代码③main.c文件的代码如下④…
阅读更多...
PDF处理控件Aspose.PDF指南：使用 C# 从 PDF 文档中删除页面

PDF处理控件Aspose.PDF指南：使用 C# 从 PDF 文档中删除页面

需要从 PDF 文档中删除特定页面&#xff1f;本快速指南将向您展示如何仅用几行代码删除不需要的页面。无论您是清理报告、跳过空白页&#xff0c;还是在共享前自定义文档&#xff0c;C# 都能让 PDF 操作变得简单高效。学习如何以编程方式从 PDF 文档中选择和删除特定页面&#…
阅读更多...
如何在不同版本的 Elasticsearch 之间以及集群之间迁移数据

如何在不同版本的 Elasticsearch 之间以及集群之间迁移数据

作者&#xff1a;来自 Elastic Kofi Bartlett 当你想要升级一个 Elasticsearch 集群时&#xff0c;有时候创建一个新的独立集群并将数据从旧集群迁移到新集群会更容易一些。这让用户能够在不冒任何停机或数据丢失风险的情况下&#xff0c;在新集群上使用所有应用程序测试其所有…
阅读更多...
Day08【基于预训练模型分词器实现交互型文本匹配】

Day08【基于预训练模型分词器实现交互型文本匹配】

基于预训练模型分词器实现交互型文本匹配 目标数据准备参数配置数据处理模型构建主程序测试与评估总结 目标 本文基于预训练模型bert分词器BertTokenizer&#xff0c;将输入的文本以文本对的形式&#xff0c;送入到分词器中得到文本对的词嵌入向量&#xff0c;之后经过若干网络…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023