Vue3.0 computed计算属性使用方法

<template>
	<h1>Vue3.0 computed计算属性</h1>
	<div class="test">
		<h2>输入</h2>
		<div>姓氏：<input type="text" placeholder="请输入姓氏" v-model="user.firstName" /></div>
		<div>名字：<input type="text" placeholder="请输入名字" v-model="user.lastName" /></div>
	</div>
	<div class="test">
		<h2>展示</h2>
		<div>姓名：<input type="text" placeholder="显示姓名" v-model="fullName1"></div>
		<div>姓名：<input type="text" placeholder="显示姓名" v-model="fullName2"></div>
		<div>姓名：<input type="text" placeholder="显示姓名" v-model="fullName3"></div>
	</div>
</template>
<style scoped>
	a {
		color: #42b983;
	}

	.test {
		width: 300px;
		height: 200px;
		border: 0.3rem dotted #2C3E50;
		margin: 0 auto;
	}
</style>
<script>
	import {
		watch,
		ReactiveEffect,
		reactive,
		computed
	} from 'vue';

	//监听输入的值{firstName,lastName}得改变

	export default {
		name: "HelloWorld",
		setup() {
			const user = reactive({
				firstName: "上官",
				lastName: "婉儿"
			})
			//第一个值
			const fullName1 = computed(() => {
				return user.firstName + "_" + user.lastName
			})//仅仅改变姓氏/名字时fullName1会改变
			//第二个值
			const fullName2 = computed({
				get() {
					return user.firstName + "_" + user.lastName;
				},
				set(newVal) {
					console.log(newVal);
					var arr = newVal.split('_');
					user.lastName = arr[1];
					user.firstName = arr[0];
				}
			})//改变姓氏/名字或改变fullName2时双发都会变化
			
			// const fullName3 = (function(){
			// 	return computed({
			// 		get() {
			// 			return user.firstName + "_" + user.lastName;
			// 		},
			// 		set(newVal) {
			// 			console.log(newVal);
			// 			var arr = newVal.split('_');
			// 			user.lastName = arr[1];
			// 			user.firstName = arr[0];
			// 		}
			// 	})
			// })();

			//第三个值
			const fullName3 = new ReactiveEffect(()=>{
				  return user.firstName+"_"+user.lastName;
			}).run();
			//不管怎么改变双方都不会变化
			console.log(fullName3);

			return {
				user,
				fullName1,
				fullName2,
				fullName3
			}
		},
	}
</script>