vue之computed

一、概念

Vue中的computed属性是一个计算属性，用于计算其依赖属性的值，并在其依赖属性发生变化时重新计算其值。computed属性是响应式的，这意味着当依赖属性发生变化时，computed属性会自动更新。
computed属性的主要特点如下：
计算属性是响应式的：当依赖属性发生变化时，computed属性会自动重新计算。
计算属性可以包含任何逻辑：除了计算值，computed属性还可以包含其他逻辑，例如警告、错误处理等。
计算属性可以访问其他组件的属性：在计算属性中，可以访问其他组件的属性，例如通过this.$refs访问组件的引用。
计算属性可以包含异步操作：计算属性可以包含异步操作，例如执行 AJAX 请求或等待其他操作完成。

二、代码

下面定义fullName为计算属性的示例代码： 

<!--vue简单框架-->
<template>
<div class="person"> 
  姓：<input type="text"  v-model="firstName"><br><!--通过v-model实现数据的双向绑定，界面数据改了能传回去-->
  名：<input type="text" v-model="lastName"><br>
  <button @click="changFullname">全名修改为li-si</button>
  全名：<span>{{fullName}}</span><br><!--测试计算属性的缓存-->
  全名：<span>{{fullName}}</span><br>
  全名：<span>{{fullName}}</span><br>
  <!--在全名中实现姓的首字母大写,下面这种可以实现，但是vue官方文档说要让模板里面尽可能简单,我们使用计算属性来做-->
  <!--<span>{{ firstName.slice(0,1).toUpperCase+firstName.slice(1)}}--{{lastName}}</span>-->
</div>
</template>

<script lang='ts'setup name="Person">
  import { ref,computed } from 'vue';//使用计算属性,导入computed
  let firstName=ref('zhang')
  let lastName=ref('san')
  
  /*let fullName=computed(()=>{ //这样定义的fullName是一个计算属性且是只读的,fullName.value='li-si',这样会直接标红，错误信息value为只读属性
    //这实现方法简写不了，要么就封装成方法也是这么写。
    //计算属性是有缓存的,用到的数据没变，fullName只算了第一次，后面直接拿来用。普通方法没有缓存
    console.log(1)
    return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'-'+lastName.value
  })*/
  let fullName=computed({ //这样定义的fullName是一个计算属性且可读可写，get和set方法两个方法都要写
    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
    } 
  })
   function changFullname(){ //修改全名为li-si
      fullName.value='li-si'
   }
</script>

<style scoped>
    .person{
      height: 110px;
      background-color: skyblue;
      padding: 8px;
    }
</style>

三、实现效果