vue3中的computed计算属性

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在处理状态管理和界面绑定上的高效和简洁。