【VUE基础】VUE3第四节—核心语法之computed、watch、watcheffect

computed

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

创建一个只读的计算属性 ref：
在这里插入图片描述

<template>
  <div class="person">
    姓名：<input type="text" v-model="fistname" ><br>
    年龄：<input type="text" v-model="lastname" ><br>
    信息：<span>{{ fullname }}</span>
  </div>
</template>
 
<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'
 
const fistname = ref('xiao')
const lastname = ref('c')
 
const fullname = computed(()=>{
  return fistname.value + "_" +lastname.value
})
</script>

创建一个可写的计算属性 ref：
在这里插入图片描述

<template>
  <div class="person">
    姓名：<input type="text" v-model="fistname" ><br>
    年龄：<input type="text" v-model="lastname" ><br>
    切换:<button @click="changefullname">点击切换为xiao_b</button><br>
    信息：<span>{{ fullname }}</span>
  </div>
</template>
 
<script lang="ts" setup name="Person">
import { ref, computed } from 'vue'
 
const fistname = ref('xiao')
const lastname = ref('c')
 
const fullname = computed({
  get(){
    return fistname.value + "_" +lastname.value
  },
  set(val){
    fistname.value=val.split("_")[0],
    lastname.value=val.split("_")[1]
  }
})


function changefullname(){
   fullname.value="xiao_b"
}

</script>

在这里插入图片描述

watch

侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。

​
监测数据变化

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

ref定义的数据。
reactive定义的数据。
函数返回一个值(getter函数)。
一个包含上述内容的数组。

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

情况一

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。
代码如下：

<template>
  <div>
    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点我sum+1</button>
  </div>
</template>
  // 方法
<script setup lang="ts" name="Person">
import { ref, watch } from 'vue'
// 数据
const sum = ref(0)
// 函数
function changeSum () {
  sum.value += 1
}
// 监视，情况一：监视【ref】定义的【基本类型】数据
const stopWatch = watch(sum, (newVale, oldVale) => {
  console.log('sum变化了', newVale, oldVale)
  if (newVale >= 10) {
    stopWatch()
  }
})
</script>

效果：
在这里插入图片描述

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

注意：

  • 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

  • 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

代码如下：

<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <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">
  import {ref,watch} from 'vue'
  // 数据
  let person = ref({
    name:'张三',
    age:18
  })
  // 方法
  function changeName(){
    person.value.name += '~'
  }
  function changeAge(){
    person.value.age += 1
  }
  function changePerson(){
    person.value = {name:'李四',age:90}
  }
  /* 
    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视{deep:true}
    watch的第一个参数是：被监视的数据
    watch的第二个参数是：监视的回调
    watch的第三个参数是：配置对象(deep、immediate等等.....) 
  */
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  },{deep:true})
  
</script>

在这里插入图片描述

情况三
监视reactive定义的【对象类型】数据，且默认开启了深度监视。
在这里插入图片描述

<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
    <hr>
    <h2>测试：{{obj.a.b.c}}</h2>
    <button @click="test">修改obj.a.b.c</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {reactive,watch} from 'vue'
  // 数据
  let person = reactive({
    name:'张三',
    age:18
  })
  let obj = reactive({
    a:{
      b:{
        c:666
      }
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changePerson(){
    Object.assign(person,{name:'李四',age:80})
  }
  function test(){
    obj.a.b.c = 888
  }

  // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
  watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
  })
  watch(obj,(newValue,oldValue)=>{
    console.log('Obj变化了',newValue,oldValue)
  })
</script>


情况四

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

若该属性值不是【对象类型】，需要写成函数形式。
若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
在这里插入图片描述

<template>
  <div class="person">
    <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
    <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">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

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

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
  /* watch(()=> person.name,(newValue,oldValue)=>{
    console.log('person.name变化了',newValue,oldValue)
  }) */

  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
  watch(()=>person.car,(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})
</script>

情况五
监视上述的多个数据
在这里插入图片描述

<template>
  <div class="person">
    <h1>情况五：监视上述的多个数据</h1>
    <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">修改第一台车</button>
    <button @click="changeC2">修改第二台车</button>
    <button @click="changeCar">修改整个车</button>
  </div>
</template>

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

  // 数据
  let person = reactive({
    name:'张三',
    age:18,
    car:{
      c1:'奔驰',
      c2:'宝马'
    }
  })
  // 方法
  function changeName(){
    person.name += '~'
  }
  function changeAge(){
    person.age += 1
  }
  function changeC1(){
    person.car.c1 = '奥迪'
  }
  function changeC2(){
    person.car.c2 = '大众'
  }
  function changeCar(){
    person.car = {c1:'雅迪',c2:'爱玛'}
  }

  // 监视，情况五：监视上述的多个数据
  watch([()=>person.name,person.car],(newValue,oldValue)=>{
    console.log('person.car变化了',newValue,oldValue)
  },{deep:true})

</script>

​

watchEffect

官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

watch对比watchEffect

1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

2. watch：要明确指出监视的数据

3. watchEffect：不用明确指出监视的数据(函数中用到哪些属性，那就监视哪些属性)。

示例代码：
在这里插入图片描述

<template>
  <div class="person">
    <h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1>
    <h2 id="demotemp">水温：{{temp}}</h2>
    <h2 id="demoheight">水位：{{height}}</h2>
    <button @click="changePrice">水温+1</button>
    <button @click="changeSum">水位+10</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,watch,watchEffect} from 'vue'
  // 数据
  let temp = ref(0)
  let height = ref(0)

  // 方法
  function changePrice(){
    temp.value += 10
  }
  function changeSum(){
    height.value += 10
  }

  // 用watch实现，需要明确的指出要监视：temp、height
  // watch([temp,height],(value)=>{
  //   // 从value中获取最新的temp值、height值
  //   const [newTemp,newHeight] = value
  //   // 室温达到50℃，或水位达到20cm，立刻联系服务器
  //   if(newTemp >= 50 || newHeight >= 20){
  //     console.log('联系服务器')
  //   }
  // })

  // 用watchEffect实现，不用之处需要监视的参数
  const stopWtach = watchEffect(()=>{
    // 室温达到50℃，或水位达到20cm，立刻联系服务器
    if(temp.value >= 50){
      console.log(document.getElementById('demotemp')?.innerText)
      console.log('联系服务器')
    }
    if(height.value >= 20){
      console.log(document.getElementById('demoheight')?.innerText)
      console.log('联系服务器')
    }
    // 水温达到100，或水位达到50，取消监视
    if(temp.value === 100 || height.value === 50){
      console.log('清理了')
      stopWtach()
    }
  })
</script>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【一次成功】清华大学和智谱AI公司的ChatGLM-4-9B-Chat-1M大模型本地化部署教程

【一次成功】清华大学和智谱AI公司的ChatGLM-4-9B-Chat-1M大模型本地化部署教程

【一次成功】清华大学和智谱AI公司的ChatGLM-4-9B-Chat-1M大模型本地化部署教程 一、环境准备二、ChatGLM-4-9B-Chat-1M简介三、模型下载2.1 安装Git LFS2.2 初始化仓库2.3 同步Git文件2.4 拉取文件2.5 下载完毕 四、python和源码安装与下载4.1 安装python4.2 下载源码4.3 安装…
阅读更多...
Monaco 中添加 CodeLens

Monaco 中添加 CodeLens

CodeLens 会在指定代码行上添加一行可点击的文字&#xff0c;点击时可以触发定义的命令&#xff0c;效果如下&#xff1a; 通过调用 API 注册 LensProvider&#xff0c;点击时触发 Command&#xff0c;首先要注册命令&#xff0c;通过 editor.addCommand () 方法进行注册。三个…
阅读更多...
韦东山嵌入式linux系列-LED驱动程序

韦东山嵌入式linux系列-LED驱动程序

之前学习STM32F103C8T6的时候&#xff0c;学习过对应GPIO的输出&#xff1a; 操作STM32的GPIO需要3个步骤&#xff1a; 使用RCC开启GPIO的时钟、使用GPIO_Init函数初始化GPIO、使用输入/输出函数控制GPIO口。 【STM32】GPIO输出-CSDN博客 这里再看看STM32MP157的GPIO引脚使用…
阅读更多...
高通开发系列 - 使用QFIL工具单刷某个镜像文件

高通开发系列 - 使用QFIL工具单刷某个镜像文件

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅！ 你的喜欢就是我写作的动力！ 返回：专栏总目录 目录 背景过程记录背景 有时候设备中刷的是user版本，无法使用fastboot刷单个镜像，这个时候该怎么办呢？ 要解决在user…
阅读更多...
Websocket在Java中的实践——整合Rabbitmq和STOMP

Websocket在Java中的实践——整合Rabbitmq和STOMP

大纲 Rabbitmq开启STOMP支持 服务端依赖参数参数映射类配置类逻辑处理类 测试测试页面Controller测试案例 在《Websocket在Java中的实践——STOMP通信的最小Demo》一文中&#xff0c;我们使用enableSimpleBroker启用一个内置的内存级消息代理。本文我们将使用Rabbitmq作为消息代…
阅读更多...
计算机类期刊横纵向对比

计算机类期刊横纵向对比

备注&#xff1a;综合影响因子更具针对性&#xff0c;将科技类期刊和人文社科期刊的影响力考虑&#xff0c;更加聚焦于某一特定科学领域&#xff1b;复合影响因子是基于期刊、学位论文、以及会议论文等多个类型的文献作为计算基础。 两者都是通过前两年发表的可被引文献在统计年…
阅读更多...
pandas数据分析（8）

pandas数据分析（8）

描述性统计量和数据聚合 描述性统计量 描述性统计量通过量化数据来概括数据集。DataFrame和Series可以通过sum、mean、count等方法来获取各种描述性统计量。在默认情况下会按照axis0返回一个Series&#xff0c;也就是说会得到一个有关列的统计量&#xff1a; 如果要计算行的统…
阅读更多...
鼠标宏怎么设置？6款鼠标自动点击器强推，游戏玩家专用！（2024全）

鼠标宏怎么设置？6款鼠标自动点击器强推，游戏玩家专用！（2024全）

随着电子游戏和日常应用的不断发展&#xff0c;我们经常会遇到一些重复性的任务或操作。而在这种情况下&#xff0c;鼠标宏以其自动化的特点成为了许多玩家和使用者的利器之一。如果你正在寻找如何设置鼠标宏来简化操作并提高效率&#xff0c;那么你来对地方了。在本文中&#…
阅读更多...
理解算法复杂度：空间复杂度详解

理解算法复杂度：空间复杂度详解

引言 在计算机科学中&#xff0c;算法复杂度是衡量算法效率的重要指标。时间复杂度和空间复杂度是算法复杂度的两个主要方面。在这篇博客中&#xff0c;我们将深入探讨空间复杂度&#xff0c;了解其定义、常见类型以及如何进行分析。空间复杂度是衡量算法在执行过程中所需内存…
阅读更多...
利用canvas压缩图片

利用canvas压缩图片

前情提要 页面打印导出pdf文件的时候&#xff0c;图片大小会影响pdf文件大小。 为了减小pdf文件大小&#xff0c;需要将图片压缩一下。在只有图片地址的情况下&#xff0c;将图片压缩后显示&#xff0c;一开始用的browser-image-compression插件&#xff0c;这是js压缩&#x…
阅读更多...
硬件产品设计过程：结构及硬件设计

硬件产品设计过程：结构及硬件设计

目录 简介 设计管理问题 简介 之前也多次谈到硬件产品的设计分为多个过程，每个过程所涉及的内容也是完全不同的。 比如说： 后台、应用app层的开发；电子硬件设计；结构、ID设计；营销侧；生产管理侧；供应链管理侧等等。接下来就谈谈最近公司开发上的一些问题。 以往由于公…
阅读更多...
docker nginx mysql redis

docker nginx mysql redis

启动没有数据卷的nginx docker run -d -p 86:80 --name my-nginx nginx把/etc/nginx中的配置复制到宿主机 docker cp my-nginx:/etc/nginx /home/nginxlkl把/html 中的文件复制到宿主机 docker cp my-nginx:/etc/nginx /home/nginxlkl删除当前镜像 docker rm -f my-nginx重新起…
阅读更多...
理解算法复杂度：时间复杂度详解

理解算法复杂度：时间复杂度详解

引言 在计算机科学中&#xff0c;算法复杂度是衡量算法效率的重要指标。时间复杂度和空间复杂度是算法复杂度的两个主要方面。在这篇博客中&#xff0c;我们将深入探讨时间复杂度&#xff0c;了解其定义、常见类型以及如何进行分析。 什么是时间复杂度&#xff1f; 时间复杂度…
阅读更多...
【多语言独立站】什么是跨境电商独立站?||如何完成完善电商系统搭建

【多语言独立站】什么是跨境电商独立站?||如何完成完善电商系统搭建

随着国际贸易的发展和互联网技术的不断提升&#xff0c;在跨境电商业务中&#xff0c;独立站是一个非常重要的组成部分。我们经常会听到的词语就是&#xff1a;「跨境电商独立站」、「外贸独立站」、「跨境独立站」、「电商独立站」等等。因此&#xff0c;我们可以发现独立站和…
阅读更多...
【web前端HTML+CSS+JS】--- JS学习笔记03

【web前端HTML+CSS+JS】--- JS学习笔记03

一、JS介绍 可以在前端页面上进行逻辑处理&#xff0c;来解决表单的验证等问题&#xff0c;提升效率&#xff0c;直接在前端提示问题&#xff0c;减少服务器压力 应用1&#xff1a;可以做静态验证和动态验证&#xff08;进行异步请求&#xff09; 应用2&#xff1a;可以解析后…
阅读更多...
Splunk Enterprise 任意文件读取漏洞(CVE-2024-36991)

Splunk Enterprise 任意文件读取漏洞(CVE-2024-36991)

文章目录 前言漏洞描述影响版本漏洞复现POC批量检测-nuclei脚本 修复建议 前言 Splunk Enterprise 是一款强大的机器数据管理和分析平台&#xff0c;能够实时收集、索引、搜索、分析和可视化来自各种数据源的日志和数据&#xff0c;帮助企业提升运营效率、增强安全性和优化业务…
阅读更多...
【可视化还能免费做？！】数据安全不用愁，快来用这款免费可视化工具做智慧港口管理平台

【可视化还能免费做？！】数据安全不用愁，快来用这款免费可视化工具做智慧港口管理平台

在智慧港口的建设中&#xff0c;实现港口的统一调度是一项关键任务。山海鲸可视化&#xff0c;这款免费可视化工具&#xff0c;通过其卓越的功能和特色&#xff0c;为智慧港口的建设提供了强大的支持。从智慧港口的需求出发&#xff0c;结合船舶调度和货物转运的需求&#xff0…
阅读更多...
「API取数」FDL获取金蝶云星空的单据数据

「API取数」FDL获取金蝶云星空的单据数据

很多企业的ERP系统都在用金蝶云星空&#xff0c;金蝶云星空API是IT人员获取数据的重要来源&#xff0c; 常常用来生成定制化报表&#xff0c;进行数据分析&#xff0c;或是将金蝶云的数据与OA系统、BI工具集成。 通常情况下&#xff0c;IT人员需要使用Python、Java等语言编写脚…
阅读更多...
Failed to get D-Bus connection: Operation not permitted

Failed to get D-Bus connection: Operation not permitted

最近使用wsl安装了centOS7镜像&#xff0c;在系统中安装了docker服务&#xff0c;但是在执行systemctl start docker的时候遇到了&#xff1a;Failed to get D-Bus connection: Operation not permitted问题&#xff0c;查阅了很多资料都没有效果&#xff0c;最终找到了一种解决…
阅读更多...
理解JS与多线程

理解JS与多线程

理解JS与多线程 什么是四核四线程&#xff1f; 一个CPU有几个核它就可以跑多少个线程&#xff0c;四核四线程就说明这个CPU同一时间最多能够运行四个线程&#xff0c;四核八线程是使用了超线程技术&#xff0c;使得单个核像有两个核一样&#xff0c;速度比四核四线程有多提升。…
阅读更多...
最新文章

Copyright @ 2022~2023