vue3学习--computed属性

在vue2中computed属性直接是可以使用的，在vue3里面需要先引入然后在setup中使用,写法也略有不同

<template>
    <div>
        姓：<input type="text" v-model="data.firstName">
    </div>
    <div>
        名：<input type="text" v-model="data.lastName">
    </div>
    <div>
        全名：<input type="text" v-model="data.fullName">
    </div>
</template>

import { computed,reactive } from 'vue'
export default {
	setup(){
		let data = reactive({
			firstName:"",
			lastName:""
		})
		data.fullName = computed({
			get(){
				return `${data.firstName}-${data.lastName}`
			},
			set(val){
				const arr = val.split('-')
				data.fisrName = arr[0]
				data.lastName = arr[1]
			}
		})
		return {
			data
		}
	}
}