Computed计算属性

计算属性是Vue框架中的一个核心特性，它为开发者提供了一种高效的数据处理方式，特别是在处理复杂的逻辑和依赖关系时，能够显著提高应用的性能和可维护性。

基本概念

Computed 是基于它们的依赖进行缓存的。只有当依赖发生变化时，它们才会重新计算。这与直接在模板中使用方法（methods）来计算值不同，因为方法会在每次调用时都执行函数。

特性

1.依赖性：计算属性会自动追踪其依赖的数据属性。当这些依赖项发生变化时，计算属性会重新计算其值。

2.缓存性：Vue知道计算属性依赖于哪些数据，并且只有当这些依赖项发生了改变才会重新计算。如果没有变化，则直接从缓存中返回之前的计算结果，这大大提高了性能。

3.声明式绑定：计算属性的结果可以绑定到模板中，就像绑定普通的数据属性一样，使得代码更加清晰和易于维护。

用法

计算属性可以在Vue实例的computed选项中定义，通常包含一个getter函数（可选地，还可以包含一个setter函数来改变依赖项）。

基本语法

<template>
	<div id="app">
		<!-- 触发changName函数修改name的值 -->
		<button @click="changName">更改Name</button>
		<!-- 计算属性的结果当作普通的数据属性使用 -->
		{{fullName}}
	</div>
</template>

<script>
	export default {
		name: 'app',
		data() {
			return {
				// 数据属性
				firstName: 'John',
				lastName: 'Doe'
			}
		},
        // 计算属性
		computed: {
			fullName: {
				get() {
                 // 计算并返回全名（计算属性的依赖项，当this.firstName/this.lastName发生改变时触发计算属性）
					return this.firstName + '' + this.lastName;
				},
				set(newValue) {
                      // 解析并设置firstName和lastName
					const namesss = newValue.split('');
					if (names.length >= 2) {
						this.firstName = names[0];
						this.lastName = names[names.length - 1];
					}
				}
			}
		},
		methods: {
			changName() {
                //触发执行此函数，修改firstName 和 lastName 的值触发与之绑定的fullName计算属性执行
				this.firstName = "Tome";
				this.lastName = 'coco';
			}
		}
	}
</script>

与methods的区别

• methods：每当触发重新渲染时，调用方法会导致函数再次执行。
• computed：只有当依赖的数据变化时，计算属性才会重新计算，结果会被缓存起来，直到下一次依赖变更。

应用场景

• 当你需要根据现有数据属性生成新值，并且这个值会频繁用于模板中展示时。
• 当计算逻辑较为复杂，不希望每次模板渲染都执行相同的计算逻辑时。
• 当需要根据某些条件控制数据的只读或可写状态时，可以利用setter功能。