Vue3中computed的用法

发布时间 2023-06-19 17:34:12作者: 大萨特

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的改变。