Vue - computed()计算属性的使用

在 Vue 3 中，computed() 是一个非常重要的 API，用于创建计算属性。计算属性是基于 Vue 实例的响应式数据进行计算，并且会在它们的依赖（即响应式数据）发生变化时自动更新。

基本语法：

import { computed } from 'vue';

const result = computed(() => {
    // 计算逻辑
    return someValue;
});

1. 导入 computed() 函数

import { computed } from 'vue';

2. 定义计算属性

computed() 接受一个计算函数作为参数，该函数返回计算结果。计算属性的值会基于其依赖的响应式数据自动更新

const count = ref(0);

const doubleCount = computed(() => {
    return count.value * 2;
});

在上述例子中，doubleCount 是一个计算属性，其值是 count 的两倍。每当 count 的值发生变化时，doubleCount 会自动重新计算。

3. 懒惰计算

计算属性是懒惰的，意味着它们仅在需要时计算，并且只会在其相关依赖发生变化时重新计算。这在性能方面非常有利，因为避免了不必要的计算。

4. 计算属性的 setter

computed() 还可以接受一个对象，包含 get 和 set 方法，以便允许计算属性具有写入功能。

const count = ref(0);

const doubleCount = computed({
  get() => {
    return count.value * 2;
  },
  set(newValue) => {
    count.value = newValue / 2;
  },
});

在这个例子中，doubleCount 是一个可写的计算属性。可以通过赋值来修改 count 的值。

doubleCount.value = 8; // 这将把 count 设置为 4

示例：

<template>
    <div class="person">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        全名：<span>{
  
  {fullName}}</span>
        <button @click="changeName">点击修改姓名</button>
    </div>
    
</template>
    
<script setup lang='ts' >

import { computed, ref } from 'vue'

const firstName = ref('zhang');
const lastName = ref('san');

// 计算属性

// 下面这种是 可读可写的
const fullName = computed({
    get(){
        return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
    },
    set(val) {
        const [str1, str2] =  val.split('-');
        firstName.value = str1;
        lastName.value = str2;
    } 
})
// 按钮点击 调用函数
const changeName = () => {
    fullName.value = 'li-si';
}

</script>
    
<style scoped>
    
</style>

 

总结

computed() 是 Vue 3 中用于创建计算属性的 API，允许定义基于其他响应式数据计算得出的值。计算属性在依赖发生变化时会自动更新，且具有懒惰计算的特性，以提高性能。此外，计算属性还可以被定义为可写，以提供更灵活的状态管理方式。computed() 在构建组件时是一个非常重要的工具，在组织和管理状态时提供了极大的便利。