【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/779154.html

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

相关文章

opencv环境搭建-python

opencv环境搭建-python

最近遇到了一些图像处理的需求&#xff0c;所以需要学习一下opencv,来记录一下我的学习历程。 安装numpy pip install -i https://pypi.tuna.tsinghua.edu.cn/simple numpy安装matplotlib pip install -i https://pypi.tuna.tsinghua.edu.cn/simple matplotlib安装opencv …
阅读更多...
一级指针 二级指针

一级指针 二级指针

目录 一级指针 二级指针 通过二级指针打印原数据 一级指针 一级指针就是存放变量的指针 代码演示&#xff1a; #include<stdio.h> int main() {int a 10;int* pa &a;return 0; } pa就是一级指针变量&#xff0c;是变量就会有地址&#xff0c;因为变量都是在…
阅读更多...
HetuEngine简介

HetuEngine简介

目录 HetuEngine是什么&#xff1f; HetuEngine的特点以及使用场景 特点 使用场景 HetuEngine介绍 结构 近期用到了Hetu&#xff0c;了解下这个工具是起什么作用的。 HetuEngine是什么&#xff1f; 是引擎&#xff0c;设计是为了让与当前的大数据生态完美融合的引擎&am…
阅读更多...
电机控制杂谈——增量式的预测电流控制的优势在哪？

电机控制杂谈——增量式的预测电流控制的优势在哪？

1.前言 前几天看到这么个问题。“模型预测控制如何消除静态误差” 评论说用增量式的预测控制。 这个回答让我想起来我大四下看的这篇论文。现在都一百多被引用了。 但是苦于当时能力有限&#xff0c;没办法复现这个文章。 所以现在想重新验证一下。 2.静态误差和电机磁链有…
阅读更多...
node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）

node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）

天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。 愿将腰下剑，直为斩楼兰。 ——《塞下曲》 文章目录 一、node.js的下载、安装和配置1. node.js下…
阅读更多...
Shell编程类-网站检测

Shell编程类-网站检测

Shell编程类-网站检测 面试题参考答法 a(1 2 3 4) echo ${a[0]} echo ${a[*]}这里声明一个数值&#xff0c;并选择逐个调用输出还是全部输出 curl -w %{http_code} urL/IPADDR常用-w选项去判断网站的状态&#xff0c;因为不加选择访问到的网站可能出现乱码无法判断是否网站down…
阅读更多...
从零开始读RocketMq源码(一)生产者启动

从零开始读RocketMq源码(一)生产者启动

目录 前言 获取源码 总概论 生产者实例 源码 A-01:设置生产者组名称 A-02:生产者服务启动 B-01&#xff1a;初始化状态 B-02&#xff1a;该方法再次对生产者组名称进行校验 B-03&#xff1a;判断是否为默认生产者组名称 B-04: 该方法是为了实例化MQClientInstance对…
阅读更多...
零基础STM32单片机编程入门(八)定时器PWM输入实战含源码视频

零基础STM32单片机编程入门(八)定时器PWM输入实战含源码视频

文章目录 一.概要二.PWM输入框架图三.CubeMX配置一个PWM输入例程1.硬件准备2.创建工程3.调试 四.CubeMX工程源代码下载五.讲解视频链接地址六.小结 一.概要 脉冲宽度调制(PWM)&#xff0c;是英文“Pulse Width Modulation”的缩写&#xff0c;简称脉宽调制&#xff0c;是利用单…
阅读更多...
转发服务器实验

转发服务器实验

首先先克隆一个虚拟机并完成ip地址的修改 nmcli connection modify ens160 ipv4.addresses 192.168.209.128/24 nmcli connection modify ens160 ipv4.method manual nmcli connection modify ens160 connection.autoconnect yes nmcli connection up ens160 nmcli connection…
阅读更多...
计算机网络浅谈—什么是 OSI 模型？

计算机网络浅谈—什么是 OSI 模型？

开放系统通信&#xff08;OSI&#xff09;模型是一个代表网络通信工作方式的概念模型。 思维导图 什么是 OSI 模型&#xff1f; 开放系统互连 (OSI) 模型是由国际标准化组织创建的概念模型&#xff0c;支持各种通信系统使用标准协议进行通信。简单而言&#xff0c;OSI 为保证…
阅读更多...
读书到底有什么意义？从笨小孩到名人的逆袭之路

读书到底有什么意义？从笨小孩到名人的逆袭之路

点击上方△腾阳 关注 作者 l 腾阳 转载请联系授权 读书到底有什么意义&#xff1f; 有一个鸟语花香的农场里&#xff0c;住着老农夫和他的小孙子。 老农夫经常在清晨会坐在窗边&#xff0c;捧着厚厚的《圣经》&#xff0c;沉浸在知识的海洋里。 小孙子问他&#xff1a;…
阅读更多...
【Linux】文件系统6——理解文件操作

【Linux】文件系统6——理解文件操作

目录 1.文件的读取 1.1.目录 1.2.文件 1.3.目录树读取 1.4.文件系统大小与磁盘读取性能 2.增添文件 2.1.数据的不一致&#xff08;Inconsistent&#xff09;状态 2.2.日志式文件系统&#xff08;Journaling filesystem&#xff09; 3.Linux文件系统的运行 4、文件的删…
阅读更多...
Selenium的自动化测试技巧有多少？【建议收藏】

Selenium的自动化测试技巧有多少？【建议收藏】

Selenium是一个用于自动化Web应用程序测试的工具。它提供了一组API&#xff0c;允许用户与Web浏览器进行交互&#xff0c;来执行各种自动化测试任务。本文将从零开始&#xff0c;详细介绍Selenium的自动化测试技巧。 第一步&#xff1a;安装Selenium 首先&#xff0c;您需要安…
阅读更多...
【鸿蒙学习笔记】Stage模型工程目录

【鸿蒙学习笔记】Stage模型工程目录

官方文档&#xff1a;应用配置文件概述&#xff08;Stage模型&#xff09; 目录标题 FA模型和Stage模型工程级目录模块级目录app.json5module.json5程序执行流程程序基本结构开发调试与发布流程 FA模型和Stage模型 工程级目录 模块级目录 app.json5 官方文档&#xff1a;app.j…
阅读更多...
WAIC：生成式 AI 时代的到来，高通创新未来！

WAIC：生成式 AI 时代的到来，高通创新未来！

目录 01 在终端侧算力上&#xff0c;动作最快的就是高通 02 模型优化&#xff0c;完成最后一块拼图 在WAIC上&#xff0c;高通展示的生成式AI创新让我们看到了未来的曙光。 生成式 AI 的爆发带来了意想不到的产业格局变化&#xff0c;其速度之快令人惊叹。 仅在一个月前&…
阅读更多...
android之蓝牙遥控器新增键值

android之蓝牙遥控器新增键值

文章目录 简述连接蓝牙代码流程总结简述 使用android 10平台来适配蓝牙遥控器新增的键值 连接蓝牙 当使用遥控器与蓝牙进行配对成功后，就可以通过getevent获取蓝牙打印的信息，如下所示 其中000700a0是发送过来的协议(0007)和码值(00a0)的组合。0xfa是驱动定义好的值，如果…
阅读更多...
AI智能歌曲创作源码系统 前后端分离 带完整的安装代码包以及搭建教程

AI智能歌曲创作源码系统 前后端分离 带完整的安装代码包以及搭建教程

系统概述 本AI智能歌曲创作源码系统集成了深度学习、自然语言处理和音乐理论&#xff0c;旨在通过用户输入的关键词、情感色彩或音乐片段&#xff0c;自动生成具有创意且风格多样的音乐作品。系统核心由两大部分构成&#xff1a;前端用户界面与后端音乐生成引擎。前端负责接收…
阅读更多...
什么是 VueQuill（前端的富文本编辑器）？

什么是 VueQuill（前端的富文本编辑器）？

什么是 VueQuill&#xff1f; 1. 简介 VueQuill 是 Vue.js 的一个富文本编辑器插件&#xff0c;它基于 Quill 编辑器构建&#xff0c;提供了简洁且功能强大的富文本编辑功能。Quill 是一个现代化的富文本编辑器&#xff0c;提供丰富的文本编辑能力&#xff0c;支持多种格式和…
阅读更多...
【学习笔记】程序设计竞赛

【学习笔记】程序设计竞赛

程序设计竞赛 文章目录 程序设计竞赛0x00 基本操作指南0x01 算法分析0x02 STL和基本数据结构栈队列集合map 0x03 排序插入排序归并排序&#xff08;Merge Sort)快速排序 0x04 搜索技术BFSDFS回溯与剪枝 深度迭代ID A*A star双向广搜 0x05 递推方程0x06 高级数据结构并查集二叉树…
阅读更多...
【强化学习的数学原理】课程笔记--3（蒙特卡洛方法）

【强化学习的数学原理】课程笔记--3（蒙特卡洛方法）

目录 蒙特卡洛方法MC Basic算法sparse reward MC Greedy 算法样本使用效率MC ϵ \epsilon ϵ-Greedy 算法一些例子 蒙特卡洛方法 第二节 推导贝尔曼最优公式中的&#xff1a; q π k ( s , a ) ∑ r P ( r ∣ s , a ) r γ ∑ s ′ P ( s ′ ∣ s , a ) v π k ( s ′ ) q…
阅读更多...
最新文章

Copyright @ 2022~2023