2025-5-20Vue3快速上手

1、computed计算属性

(1)计算属性（Computed Properties） 是一种特殊的属性，它的值通过函数计算得到，而非直接存储。与方法（methods）相比，计算属性的核心优势在于 缓存机制：只有当依赖数据发生变化时，才会重新计算，否则直接返回缓存结果。

核心特点:

1. 基于依赖的自动缓存
   计算属性会记住其依赖项，并在依赖不变时复用缓存值，避免重复计算。

2. 响应式依赖跟踪
   框架会自动分析计算属性的依赖关系（如 Vue 的响应式系统或 React 的依赖数组）。

3. 提高性能
   尤其适合复杂计算场景（如大量数据处理、递归计算等）。

(2)与方法对比，体现缓存

同样是将fullName展示三次，若使用计算属性：当fullName所依赖的firstName和lastName未发生变化时，fullName只计算一次；若使用方法：则每次都要计算一次

（3）计算属性也是一个ref对象

（4）计算属性默认只读，若要可读可写，就要配置完整的getter、setter

点击修改姓名，先调用计算属性的setter修改firstName和lastName，检测到firstName和lastName的变化后（firstName变成‘li’,lastName变成‘si’），调用getter重新计算

如果set中修改的firstName 和 lastName使用原来的‘zhang’和‘san’,调用完setter后不会调用getter

<template>
  <div>
 姓：<input type="test" v-model="firstName"><br>
名： <input type="test" v-model="lastName"><br>
 <span>全名：{{ fullName }}</span><br>
 <span>全名：{{ fullName }}</span><br>
 <span>全名：{{ fullName }}</span><br>
 <button @click="changeFullName">修改姓名</button>
 <span>函数全名：{{ fullName2() }}</span><br>
 <span>函数全名：{{ fullName2() }}</span><br>
 <span>函数全名：{{ fullName2() }}</span><br>

 
  </div>
</template>

<script lang="ts">
 export default {
  name:'Person234'
 }
</script>


<script lang="ts" setup >
import {ref,reactive,toRef,toRefs, computed} from 'vue'
let firstName = ref('zhang')
let lastName = ref('san')
//该计算属性只能读，不能修改
// let fullName = computed(()=>{
//   console.log('调用计算属性')
//   return firstName.value+lastName.value
// })
//该计算属性可读可修改
let fullName = computed({
 get:()=>{
  console.log('get')
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) +'-'+ lastName.value//姓的首字母大写
 },
 set:(val)=>{
    console.log('set')
    // const x = val.split('-')
    // let [str1,str2] = x
    // firstName.value = str1
    // lastName.value = str2
    firstName.value = 'zhang'
    lastName.value = 'san'
    

 }
})
console.log('fullName',fullName)

let changeFullName = function(){
  console.log('change')
  fullName.value = 'li-si'
  
}
let fullName2 = function(){
  console.log('调用函数')
  return firstName.value +'-'+ lastName.value
}
</script>

<style>

</style>