vue3 computed
时间: 2023-11-03 19:59:55 浏览: 38
computed是Vue3中的一个特性,也可以称为计算属性。它用于根据其他响应式数据进行计算并返回一个新的值。computed具有缓存的特性,只有相关的响应式数据发生变化时,才会重新计算其值。此外,computed还可以通过setter方法实现对计算属性的修改。
在Vue3中,computed可以使用简写形式和完整形式。简写形式可以直接传入一个函数,函数中返回计算属性的值。完整形式可以传入一个对象,该对象包含get和set方法。get方法用于获取计算属性的值,set方法用于对计算属性进行修改。
下面是一个使用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>
```
以上代码中,我们创建了一个响应式对象per,其中包含surname和name两个属性。我们使用computed创建了一个计算属性fullName,它的值由per.surname和per.name拼接而成。在模板中,我们通过v-model将输入框的值与per.surname、per.name和per.fullName进行绑定。