Vue3.0组合式API:computed计算属性、watch监听器、watchEffect高级监听器

embedded/2024/9/25 2:31:17/

1、computed() 计算属性

在模板中绑定表达式只能用于简单的运算。如果运算比较复杂,可以使用 Vue.js 提供的计算属性,通过计算属性可以处理比较复杂的逻辑。

1.1 计算属性的应用

通过计算属性可以实现各种复杂的逻辑,包括运算、函数调用等,只要最后返回一个计算结果就可以。当计算属性依赖的数据发生变化时,计算属性的值会自动更新,所有依赖该计算属性的数据绑定也会同步进行更新。

【实例】使用 computed 计算属性,实现每个单词首字母大写。

<template><p>原字符串:{{ data }}</p><p>新字符串:{{ newData }}</p>
</template><script setup>
//导入函数
import { ref, computed } from 'vue';//创建一个响应式代理对象
const data = ref('my heart will go on');//计算方法:实现首字母大写
const newData = computed(() => {let arr = data.value.split(' '); //注意:使用响应式对象的.value属性,获取内部值for (let i = 0; i < arr.length; i++) {arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1).toLowerCase();}return arr.join(' ');
});</script>

执行结果:

2.2 计算属性的 getter 和 setter

每一个计算属性都包含一个 getter 和一个 setter。getter 只要用来读取值,而 setter 主要用来设置值。getter 主要用来读取值,而 setter 主要用来设置值。当手动更新计算属性的值时,就会触发 setter,执行一些自定义的操作。

【实例】使用 计算属性的 getter 和 setter,重新设置人物姓名。

<template><p>人物名称:{{ person.fullname }}</p>
</template><script setup>
//导入函数
import { reactive, computed } from 'vue';//创建一个响应式代理对象
const person = reactive({firstName: 'Jim',lastName: 'Carrey'
});// 计算属性 - 简写
// person.fullName = computed(() => {
//   return `${person.firstName} ${person.lastName}`
// })//计算属性的 getter 和 setter
person.fullname = computed({get() {return `${person.firstName} ${person.lastName}`},set(value) {const arr = value.split(' ');person.firstName = arr[0]person.lastName = arr[1]}
});//重新设置人物名称
person.fullname = 'Will Smith';</script>

执行结果:

1.3 methods 与 computed 的区别

问:Vue 中的 methods 方法与 computed 计算属性有什么区别?

答:主要区别是 methods 方法会实时计算,而 computed 计算属性是使用缓存数据。

将相同的操作定义为一个方法,或者定义为一个计算属性,两种方式的结果完全相同。那么为什么还需要计算属性呢?因为计算属性是基于它们的依赖进行缓存的。当页面重新渲染时,如果依赖的数据未发生改变,使用计算属性获取的值就是一直是缓存值。只有依赖的数据发生改变时才会重新获取值。如果使用的是方法,在页面重新渲染时,方法中的函数总会被重新调用。

详情请浏览本博客的文章:《Vue中的methods方法与computed计算属性的区别》

2、watch() 监听器

watch() 方法相当于 Vue 根实例选项对象中的 watch 选项。该方法用于监听特定的数据,并在回调函数中应用。当被监听的数据发生变化时,才会调用回调函数。

2.1 监听 ref 响应式对象

watch() 方法可以接收两个参数。如果使用该方法监听的是一个 ref 对象,那么第一个参数需要监听的 ref 对象,第二个参数是当监听的数据发生变化时触发的回调函数。

【实例】使用 watch() 方法监听一个 ref 响应式对象,实现“米”和“厘米”单元的换算结果。

<template>请输入米数:<input type="text" size="6" v-model="data" /><p>换算结果:{{ result }}</p>
</template><script setup>
//导入函数
import { ref, watch } from 'vue';//创建一个 ref 响应式代理对象
const data = ref(0);//换算结果变量
const result = ref('');//watch监听器
watch(data, (newValue, oldValue) => {console.log("新值", newValue);console.log("旧值", oldValue);result.value = `${data.value} 米 = ${data.value * 100} 厘米`;
});</script>

执行结果:

 

2.2 监听 reactive 响应式对象

如果 watch() 方法监听的是一个 reactive 对象中的某个属性,那么第一个参数需要使用返回该属性的函数的方式。

watch() 方法的两个额外参数:

1、immediate:是否立即执行。

2、deep:是否深度监听。

注意:

如果要监听的属性值是一个对象,要想监听对象内部值的变化,需要在监听属性的选项参数中设置 deep 选项的值为 true(开启深度监听)。

【实例2】使用 watch() 方法监听一个 reactive 响应式对象中的某个属性,输出属性的原值和新值。

<template><p>商品名称:{{ product.name }}</p><p>{{ product.remark }}</p>
</template><script setup>
//导入函数
import { reactive, watch } from 'vue';//创建一个 reactive 响应式代理对象
const product = reactive({name: '华为手机',price: 6999,remark: ''
});//watch监听器
watch(() => product.price, (newValue, oldValue) => {product.remark = `原价格:${oldValue}元,新价格:${newValue}元`;
},//两个额外参数(非必填){immediate: false,  //关闭:立即监听;默认关闭deep: true         //开启:深度监听;如果监听对象是 reactive() 响应式对象,则默认自动开启});//修改属性值
product.price = 3999;</script>

执行结果:

2.3 监听多个属性

监听属性通常用来实现数据之间的换算,如长度单位之间的换算、速度单位之间的换算、汇率之间的换算等。

【实例】使用 watch() 方法监听多个属性,实现速度单位之间的换算。

<template><p><label for="meter">米/秒:</label><input id="meter" type="number" v-model="meter"></p><p><label for="kilometer">千米/小时:</label><input id="kilometer" type="number" v-model="kilometer"></p>{{ meter }}米/秒={{ kilometer }}千米/小时
</template><script setup>
//导入函数
import { ref, watch } from 'vue';//创建两个 ref 响应式代理对象
const meter = ref(0);
const kilometer = ref(0);//watch监听器:监听多个属性
watch([meter, kilometer],([newMeter, newKilometer], [oldMeter, oldKilometer]) => {if (newMeter != oldMeter) {kilometer.value = newMeter * 3600 / 1000;}if (newKilometer != oldKilometer) {meter.value = newKilometer * 1000 / 3600;}}
);</script>

执行结果:

3、watchEffect() 高级监听器

3.1 watchEffect() 的使用

watchEffect() 方法用来监听数据的变化,类似于 Vue 2.x 中的 watch 选项。该方法接收一个函数作为参数,它会立即执行一次,同时会跟踪函数里面用到的所有响应式状态,当状态发生变化时会重新运行该函数。

【实例】使用 watchEffect() 方法监听数据,实现“米”和“厘米”单元的换算结果。

<template>请输入米数:<input type="text" size="6" v-model="data" /><p>换算结果:{{ result }}</p>
</template><script setup>
//导入函数
import { ref, watchEffect } from 'vue';//创建一个 ref 响应式代理对象
const data = ref(0);//换算结果变量
const result = ref('');//watch监听器
watchEffect(() => {result.value = `${data.value} 米 = ${data.value * 100} 厘米`;
});</script>

执行结果:

3.2 watch 和 watchEffect 的区别

watch 和 watchEffect 是 Vue 3.0 中新增的两个响应式 API,用于监听数据的变化。watch 适用于需要获取新值和旧值,或者需要懒执行的场景,而 watchEffect 适用于需要监听多个数据源,并且需要立即执行的场景。它们之间的区别如下:

  1. watch 是监听单个数据源,可以设置 immediate 和 deep 选项,可以获取新值和旧值;watchEffect 则是监听一组数据源,不能设置 immediate 和 deep 选项,不能获取新值和旧值。
  2. watch 是懒执行的,只有在数据变化时才会执行回调函数,而 watchEffect 则是立即执行的,不管数据是否变化。
  3. watch 可以监听计算属性,而 watchEffect 不能监听计算属性。


http://www.ppmy.cn/embedded/112319.html

相关文章

2024最全网络安全工程师面试题(附答案),金九银十找工作必看!

《网安面试指南》http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247484339&idx1&sn356300f169de74e7a778b04bfbbbd0ab&chksmc0e47aeff793f3f9a5f7abcfa57695e8944e52bca2de2c7a3eb1aecb3c1e6b9cb6abe509d51f&scene21#wechat_redirect 《Java代码审…

k8s service如何实现流量转发

1 基本概念 Service&#xff1a;在Kubernetes&#xff08;K8s&#xff09;中&#xff0c;Service用于将流量转发到后端的Pod中。Service提供了一种稳定的网络入口&#xff0c;尽管后端的Pod可能会动态改变 kube-proxy: kube-proxy是Kubernetes集群中的核心组件之一&#xff0…

python乱炖6——sum(),指定维度进行求和

python乱炖6——sum&#xff08;&#xff09;&#xff0c;指定维度进行求和 import torch# 创建一个三维张量 x torch.tensor([[[1, 2, 3], [4, 5, 6]],[[7, 8, 9], [10, 11, 12]] ])print("Original tensor x:") print(x) print(x.shape)>>> tensor([[[ …

显示器最佳分辨率设置

文章目录 最佳分辨率原则MacBook 的视网膜屏的物理分辨率通常远高于系统推荐的设置分辨率 显示器常见长宽比16:9显示器最佳分辨率推荐16:10显示器最佳分辨率推荐 最佳分辨率原则 No1. 显示器的默认分辨率设置&#xff08;实际上是系统设置&#xff09;一般就是最佳分辨率。 N…

使用Twilio API轻松发送消息:从SMS到WhatsApp

# 使用Twilio API轻松发送消息&#xff1a;从SMS到WhatsApp## 引言随着时代的发展&#xff0c;发送自动化的短信和消息已成为许多业务的基本需求。Twilio是一个强大的平台&#xff0c;它提供了丰富的API接口&#xff0c;帮助开发者通过SMS和多种消息通道&#xff08;如WhatsApp…

【计算机网络 - 基础问题】每日 3 题(三)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏&…

【加密算法基础——对称加密和非对称加密】

对称加密与非对称加密 对称加密和非对称加密是两种基本的加密方法&#xff0c;各自有不同的特点和用途。以下是详细比较&#xff1a; 1. 对称加密 特点 密钥: 使用相同的密钥进行加密和解密。发送方和接收方必须共享这个密钥。速度: 通常速度较快&#xff0c;适合处理大量数…

为什么mac打不开rar文件 苹果电脑打不开rar压缩文件怎么办

你是否遇到过这样的情况&#xff0c;下载了一个rar文件&#xff0c;想要查看里面的内容&#xff0c;却发现Mac电脑无法打开。rar文件是一种常见的压缩文件格式&#xff0c;它可以将多个文件或文件夹压缩成一个文件&#xff0c;节省空间和传输时间。如此高效实用的压缩文档&…