Vue计算属性（computed）的使用方法及使用场景总结

在Vue中，computed属性是基于它们的响应式依赖进行缓存的。只有当相关响应式依赖发生改变时，它们才会重新求值。这是Vue中一个非常强大的特性，它使得我们可以在模板中声明式地描述数据的转换，而不需要手动编写更新DOM的逻辑。

基本用法

computed属性在Vue组件的computed选项中定义，它们可以是getter函数，也可以同时包含getter和setter函数。通常，我们只需要getter函数来返回一些基于组件数据计算的值。

javascript复制代码

	export default {
	data() {
	return {
	firstName: 'John',
	lastName: 'Doe'
	}
	},
	computed: {
	// 只有一个getter的computed属性
	fullName() {
	return this.firstName + ' ' + this.lastName;
	},
	// 带有getter和setter的computed属性
	fullNameWithCaps: {
	// getter
	get() {
	return this.fullName.toUpperCase();
	},
	// setter
	set(newValue) {
	const names = newValue.split(' ');
	this.firstName = names[0];
	this.lastName = names[names.length - 1];
	}
	}
	}
	}

特点

1. 缓存性：计算属性是基于它们的响应式依赖进行缓存的。只要依赖没有改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

2. 响应性：当计算属性依赖的响应式数据发生变化时，计算属性会重新计算，并触发视图更新。

3. 声明式：计算属性让我们能够以声明式的方式描述数据的转换逻辑，这有助于我们编写更清晰、更易于维护的代码。

注意事项

• 虽然计算属性在大多数情况下都很有用，但也要注意不要滥用它们。对于任何复杂逻辑，尤其是那些包含异步操作或大量计算的，都应该考虑使用methods或watch。

• 计算属性默认只有getter，但在需要时也可以提供一个setter。这对于需要基于用户输入或其他操作来更新状态的情况很有用。

• 当需要在模板中多次引用同一个计算属性时，由于计算属性的缓存特性，它们将比methods更高效，因为methods在每次调用时都会重新执行函数。

Vue的computed属性是构建响应式应用程序的重要工具之一，它们让我们能够以声明式的方式处理数据转换和依赖关系，从而简化代码并提高性能。