1. 在computed中定义计算属性方法根据已有的数据进行计算返回一个要显示的新数据
2. 在页面中使用{{计算属性名}}来显示返回的数据
3. computed: 内部有缓存, 多处读取只计算一次
4. 计算属性默认相当于只有getter来根据已有数据计算返回一个新数据值, 也可以指定setter来监视我们主动修改当前计算属性值
<template>
<div style="font-size: 14px;">
fistName: <input v-model="user.firstName"/><br>
lastName: <input v-model="user.lastName"/><br>
fullName1: <input v-model="fullName1"/><br>
fullName2: <input v-model="fullName2"><br>
</div>
</template>
<script lang="ts">
// vue3.0版本语法
import { defineComponent, reactive, computed, } from 'vue'
export default defineComponent({
setup () {
const user = reactive({
firstName: '张',
lastName: '三'
})
// 只有getter的计算属性
const fullName1 = computed(() => {
console.log('fullName1',fullName1)
return user.firstName + '-' + user.lastName
})
// 有getter与setter的计算属性
const fullName2 = computed({
get () {
console.log('fullName2 get')
return user.firstName + '-' + user.lastName
},
set (value: string) {
console.log('fullName2 set')
// fullName2的值发生改变后，将值拆分回传给user身上的firstName和lastName
const names = value.split('-')
user.firstName = names[0]
user.lastName = names[1]
}
})
return {
user,
fullName1,
fullName2,
}
}
})
</script>
