【vue3】入门系列—vue3 计算属性computed

在 Vue 3 的 Composition API 中，computed 函数用于创建计算属性。计算属性是基于它们的响应式依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。这使得计算属性在处理复杂逻辑时非常高效，因为它们可以避免不必要的重复计算。

以下是如何在 Vue 3 的 Composition API 中使用 computed 的示例：
写法：

import { computed, reactive } from 'vue'
export default { 
	name:'App',
	setup() {
		let person = reactive(
			{
				surname: '张',
				name: '三'
			}
		)
		//计算属性--简写（没有考虑计算属性被修改的情况）
		person.fullname = computed(() => { 
			return person.surname +'-'+person.name
		})
	}
}

注意，computed 函数接收一个 getter 函数作为参数，该 getter函数返回一个基于响应式依赖的值。当依赖项变化时，computed 会重新计算 getter 函数的返回值，并更新计算属性的值。

你还可以使用 computed 的第二个参数（可选）来提供一个 setter 函数，以便在需要时手动设置计算属性的值。但是，由于计算属性通常是基于其他响应式依赖进行计算的，所以 setter 函数的使用并不常见：

import { computed, reactive } from 'vue'
export default { 
	name:'App',
	setup() {
		let person = reactive(
			{
				surname: '张',
				name: '三'
			}
		)
		//计算属性--简写（没有考虑计算属性被修改的情况）
		person.fullname = computed(() => { 
			get() {
				return person.surname+'-'+person.name
			},
			set(value) {
				const nameArr=value.split('-')
				person.surname = nameArr[o]
				person.name = nameArr[1]
			}
		})
	}
}