Vue 3 中的 computed
计算属性是一种高级特性,它使你能够在不显式修改或触发重新渲染的情况下,基于组件的响应式状态(例如由 ref
或 reactive
创建的数据)计算出新的值。计算属性自动追踪其依赖关系,并且只有当这些依赖项发生变化时,才会重新计算其值,这一特性显著提升了应用的性能。
核心特性
1. 自动缓存:
Vue 的计算属性会自动缓存上一次计算的结果,如果依赖的数据没有变化,再次访问计算属性时,它会直接返回之前计算的值,而不会重复执行计算逻辑。
2. 响应式更新:
当计算属性依赖的响应式数据发生变化时,Vue 会自动感知并重新计算计算属性的值,确保界面能够及时反映出数据的最新状态。
3. 声明式编程:
通过定义计算属性,你可以将复杂的逻辑从模板中抽离出来,使得代码更加清晰和易于维护。在模板中,你只需像访问普通数据一样使用计算属性,无需关心其背后的计算逻辑。
4. 可读写:
默认情况下,计算属性是只读的,但 Vue 允许你定义一个带有 get
和 set
方法的对象来创建可写的计算属性,这样你不仅可以获取计算后的值,还能通过设置新值来影响依赖的原始数据。
5. 模板友好:
在模板表达式中使用计算属性时,你不需要添加 .value
,Vue 会自动处理解包过程,使得模板代码更加简洁。
使用场景
- 数据处理:
当需要基于现有数据计算出新的展示数据时,比如格式化日期、计算总价等。
- 逻辑复用:
- 如果某些计算逻辑被多个地方使用,将其封装成计算属性可以避免代码重复。
- 提高性能:
- 对于复杂的计算逻辑,尤其是那些涉及多个数据依赖的情况,使用计算属性可以有效减少不必要的计算。
示例
<template>
<div id="list">
姓:<input type="text" v-model="sotr.name"><br>
名:<input type="text" v-model="sotr.ming"><br>
<span>{{fast}}---{{sotr.ming}}</span>
<!-- 显示计算后的名字初始状态 -->
<span>{{ fast }}</span>
<!-- 重复元素以展示视觉效果 -->
<span>{{ fast }}</span>
<span>{{ fast }}</span>
<span>{{ fast }}</span>
<span>{{ fast }}</span>
<button @click="listname">点击修改名字为li_si</button>
</div>
</template>
<script lang="ts">
export default {
name:"list"
}
</script>
<script setup lang="ts">
import {reactive,computed} from 'vue'
// 初始化响应式对象用于存储姓名和名
let sotr = reactive({
name:"zhang",
ming:"san"
})
// 定义一个计算属性,用于特定格式化并显示姓名
let fast = computed({
get(){
// 格式化姓名,使第二个字符大写并连接剩余部分
return sotr.name.charAt(1).toUpperCase() + sotr.name.slice(1)
},
set(val){
// 解析新值并相应更新`sotr`对象
console.log("设置",val);
const [arr1,arr2] = val.split("_")
sotr.name = arr1
sotr.ming = arr2
}
})
/**
* 更新计算的姓名属性为新值。
* 此函数直接触发`fast`计算属性的setter。
*/
function listname(){
// 将计算的姓名属性设置为新值
fast.value = 'li_si'
}
</script>
<style scoped>
#list{
width: 100%;
height: 500px;
background-color: rgb(255, 204, 0);
}
.lo{
text-align: center;
padding-top: 10px;
}
span{
text-align: center;
display: block;
}
</style>
computed计算属性是有缓存的,方法是没有缓存的
这段代码是一个Vue 3的单文件组件示例,使用了Composition API(通过<script setup>
语法糖),展示了如何使用reactive
和computed
来创建和管理响应式数据以及计算属性。下面是详细的解释:
HTML模板部分 (<template>
)
- 提供了两个输入框,分别绑定到响应式对象
sotr
的name
和ming
属性上,使用v-model
实现双向数据绑定。 - 显示了计算属性
fast
的值,以及多次重复展示以观察视觉效果。 - 有一个按钮,点击时会调用
listname
方法来修改计算属性的值。
<script setup>
部分
- 引入了Vue的
reactive
和computed
函数。 - 使用
reactive
创建了一个响应式对象sotr
,初始化有name
和ming
两个属性。 - 定义了一个计算属性
fast
,它有一个get
函数用于计算显示的名字(将sotr.name
的第二个字符转为大写,然后连接其余部分),和一个set
函数用于处理外部对fast
的赋值,这里将传入的值(预期格式为"首字母_名")解析后更新sotr
的name
和ming
属性。 - 定义了
listname
方法,用于直接修改fast
的值为'li_si'
,这将触发计算属性的set
方法,进一步更新sotr
的name
为li
,ming
为si
。
<style scoped>
部分
- 提供了一些CSS样式,设置了组件的背景颜色、文本居中、内边距等,以美化页面显示。
功能概述
这个组件展示了如何使用Vue 3的响应式系统和计算属性来动态更新界面。用户可以通过输入框更改姓名的各个部分,而计算属性fast
则自动根据这些输入更新显示的名字,同时保持特定的格式化规则(如名字的第二个字符大写)。点击按钮会触发一个事件,通过计算属性的setter逻辑,快速地把名字改为预设的“李思”。整个过程中,Vue的响应式系统确保了界面的自动更新,体现了Vue在处理状态管理和界面绑定上的高效和简洁。