输入框联动

我这样一个场景，如下图

为了说明问题，我简化一下，把关注点放在姓名输入框跟下面两个输入框的联动上，不考虑解析逻辑的严谨，我假定姓名中的第一个字是姓，剩下的是名。如果姓名变化了，则重新计算姓和名两个输入框，如果姓或名两个输入框变了，那么重新计算姓名输入框中的值。

如果姓和名两个输入框只作为展示而不允许输入的话，会实现起来会很简单，只需要定义两个计算属性即可

import { computed, ref } from 'vue';

const fullName = ref('');
const familyName = computed(fullName, () => {
	return fullName.value[0] || '';
});

const name = computed(fullName, () => {
	return fullName.value && fullName.value.substr(1, fullName.value.length - 1);
});

问题就处在了姓名和姓、名是双向联动的。第一感觉，用watch实现，即watch到姓名变化，重新计算姓和名，watch到姓或名变化，重新计算姓名。但是再仔细想想，这样会不会导致死循环呢？乍一看的确会出现死循环，比如fullName变化了，会触发familyName和name变化，又会触发familyName和name的watch执行改变fullName。但是真实情况确实没有出现死循环。这个应该是vue处理过了，具体在哪里我还不知道，有机会一定要看一下这部分的源码，TODO: 占位符。

我本来认为会有死循环，所以想提供另外一种方法，现在看来多此一举，哈哈

import { ref, watch } from 'vue';
const fullName = ref('');
const lastName = ref('');
const firstName = ref('');

watch(fullName, () => {
	lastName.value = fullName.value[0] || '';
	firstName.value = fullName.value && fullName.value.substr(1, fullName.value.length - 1);
});

watch(firstName, () => {
	fullName.value = [lastName.value, firstName.value].filter(Boolean).join('');
});

watch(lastName, () => {
	fullName.value = [lastName.value, firstName.value].filter(Boolean).join('');
});

让我改良一下，把fullName作为计算属性

import { watch, ref, computed } from 'vue';

const lastName = ref('');
const firstName = ref('');

const fullName = computed(() => {
	get() {
		return  [lastName.value, firstName.value].filter(Boolean).join('');
	},
	set(val) {
		lastName.value = val[0] || '';
		firstName.value = val && val.substr(1, val.length - 1);
	}
});

ps: 示例代码使用vue3 composition api。出用vue3有点不适应，ref reactive还是增加了心智负担，希望熟悉后慢慢会变好:)