Vue3 计算属性

在vue2中的计算属性，写法是配置项

在vue3中变成了组合式api，写法是一个函数，其余写法基本一致，如果计算出来的属性只读，可以写完简写形式，如何需要修改 则要配置getter和 setter

<template>
	姓：<input type="text" v-model="person.firstName">
	<br>
	名：<input type="text" v-model="person.lastName">
	<br>
	全名：<input type="text" v-model="person.fullName">
    <br>  
	<span>全名：{{person.fullName}}</span>
	
</template>

<script>
	import {reactive,computed} from 'vue'
	export default {
		name: 'Demo',
		setup(){
			let person = reactive({
				firstName:'张',
				lastName:'三'
			})
			//计算属性——简写
			/* person.fullName = computed(function(){
				return person.firstName + '-' + person.lastName
			}) */

			//计算属性——完整写法
			person.fullName = computed({
				get(){
					return person.firstName + '-' + person.lastName
				},
				set(value){
                    //获取到这个属性的最新值
                    console.log(value);
					const nameArr = value.split('-')
					person.firstName = nameArr[0]
					person.lastName = nameArr[1]
				}
			})
			return {
				person
			}
		}
	}
</script>