Vue3中computed的用法

 computed又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去。

一、computed简写形式

<template>
  <div>
    <div>姓：<input type="text" v-model="per.surname"></div>
    <div>名：<input type="text" v-model="per.name"></div>
    <div>姓名：<input type="text" v-model="per.fullName"></div>
  </div>
</template>
 
<script>
import { computed, reactive } from 'vue'
 
export default {
  setup(){
    let per=reactive({
      surname:'勇敢',
      name:'小陈'
    })
    per.fullName=computed(()=>{
      return per.surname+'~'+per.name
    })
    return{
      per
    }
  }
}
</script>
 
<style>
 
</style>

        当我们动态的去更改surname或name时，都会引起fullName的改变。
二、computed的完整形式

        为什么说是computed的完整形式呢，因为computed的简写形式只是单独的完成了读的功能，而没办法去更改surname和name的值，下面我们进行computed的完整形式。

        当我们动态的去更改surname或name时，都会引起fullName的改变。
二、computed的完整形式

        为什么说是computed的完整形式呢，因为computed的简写形式只是单独的完成了读的功能，而没办法去更改surname和name的值，下面我们进行computed的完整形式。