Vue3_2024_7天【回顾上篇watch常见的后两种场景】完

随笔:这年头工作不好找咯,大家有学历提升的赶快了,还有外出人多注意身体,没错我在深圳这边阳了,真的绝啊,最尴尬的还给朋友传染了!!!

之前三种的监听情况,监听的是整个对象变化,下面
第四种情况: ref和reactive都能定义响应式对象,若监听其对象内部单个属性变化;
1.1(单个-基本类型-监听): 对ref 和reactive定义的响应式对象中【某个】属性监听,且该属性为【基本数据类型】,需要写成函数式;

例如:watch(参数1:箭头函数,参数2:监听变化箭头函数)
在这里插入图片描述

1.2(单个-对象数据类型-监听): 对ref 和reactive定义的响应式对象中【某个】属性监听,且该属性为【对象数据类型】,需要写成函数式;

例如:watch(参数1:箭头函数,参数2:监听变化箭头函数,参数3:监听配置对象{deep:true})
在这里插入图片描述

1.3 注

以上两种监听里面的参数一:就是getting函数(一个函数,一个返回值)

1.4 附代码
<template>
  <div style="background-color: #eeeeee;">
  <div>姓名:{{person.name}}</div>
  <div>喜欢的书籍:{{person.likeBook.book1}}{{person.likeBook.book2}}</div>
  </div>
  <div style="display:flex;">
    <button @click="updateName()">修改-姓名</button>
    <button @click="updateLikeBook()">修改-喜欢的书籍</button>
  </div>
</template>
<script name="Greg_04">
</script>

<script setup lang="ts">
import {reactive,watch} from 'vue';
let person=reactive({name:'钟家明',likeBook:{book1:'《红楼梦》',book2:'《三国演义》'}});

//修改
function updateName(){
  person.name='温樟丽'
}
function updateLikeBook(){
  person.likeBook={book1:'《泰戈尔飞鸟集》',book2:'《老人与海》'};
}

//第一:监听person里面单个属性变化
//1.单个属性变化(基本数据类型)
watch(()=>{
  return person.name;
},(newVal,oldVal)=>{
  console.log("person对象内,name基本类型~属性变化了...",newVal,oldVal);
})

//2.单个属性变化(对象数据类型)
watch(()=>{
  return person.likeBook;
},(newVal,oldVal)=>{
  console.log("person对象内,likeBook对象~属性变化了...",newVal,oldVal);
},{deep:true})

</script>

<style>

</style>
第五种情况:基于第四种情况,监视多个数据

在这里插入图片描述

结语:第一种情况和第四种情况,在开发比较常见!

相关推荐

  1. vue中computed和watch使用场景

    2024-04-03 12:28:02       19 阅读
  2. vue】computed和watch区别和应用场景

    2024-04-03 12:28:02       8 阅读
  3. Vue3】watch监听情况

    2024-04-03 12:28:02       25 阅读
  4. 将base64格式图片画到canvas(js和vue

    2024-04-03 12:28:02       11 阅读
  5. vue3:中warch监听写法

    2024-04-03 12:28:02       22 阅读

最近更新

  1. XiaodiSec day014 Learn Note 小迪渗透学习笔记

    2024-04-03 12:28:02       0 阅读
  2. 微信小程序

    2024-04-03 12:28:02       0 阅读
  3. notepad++快捷键和宏录制

    2024-04-03 12:28:02       0 阅读
  4. stm32开发三、单片机关键字extern

    2024-04-03 12:28:02       0 阅读
  5. 云原生周刊:CNCF 2023 年度调查报告 | 2024.4.15

    2024-04-03 12:28:02       0 阅读
  6. OpenCV2之简单处理视频

    2024-04-03 12:28:02       0 阅读
  7. Uipath用计划任务启动 bat脚本语句

    2024-04-03 12:28:02       0 阅读
  8. 【C语言】归并排序算法实现

    2024-04-03 12:28:02       0 阅读

热门阅读

  1. 中介者模式:优雅解耦的利器

    2024-04-03 12:28:02       5 阅读
  2. 分布式锁的几种实现方式

    2024-04-03 12:28:02       5 阅读
  3. 策略模式

    2024-04-03 12:28:02       4 阅读
  4. 策略模式详解+代码案例

    2024-04-03 12:28:02       4 阅读
  5. 洛谷 P1747 好奇怪的游戏

    2024-04-03 12:28:02       5 阅读
  6. 非关系型数据库Redis部署与常用命令

    2024-04-03 12:28:02       7 阅读
  7. 用 ipset 和 iptables 保护 sip 端口

    2024-04-03 12:28:02       5 阅读
  8. TCP

    TCP

    2024-04-03 12:28:02      4 阅读