Computed计算函数getter和setter

计算属性的getter和setter参数固定，getter没有参数，setter只有一个参数。

1.get方法是当属性被读取时触发，在计算属性中，如果计算属性依赖数据发生变化时会调用get方法，并且会将返回结果缓存起来。

2.get方法必须需要一个返回值

3.set只有在对计算属性直接赋值的时候触发

3.如果set方法没有改变get方法中的依赖数据，则get方法不会再次调用，而是直接使用缓存值

举个栗子

<template>
	<div id="app">
		 <div>
		    <input v-model="firstName" placeholder="First Name">
		    <input v-model="lastName" placeholder="Last Name">
		    <p>Full Name: {{ fullName ='调用Set方法' }}</p>//直接对计算属性赋值，调用set方法
		    <input v-model="computedFullName" placeholder="Change Full Name">
		  </div>
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	      firstName: '',
	      lastName: '',
	      // 用于双向绑定的计算属性，实际操作的是fullName的计算属性
	      computedFullName: ''
	    };
	  },
	  computed: {
	    // 计算属性fullName，包含getter和setter
	    fullName: {
	      // getter函数
	      get() {
	        // 合成全名（当依赖数据发生改变时，调用get）
	        return this.firstName + ' ' + this.lastName;
	      },
	      // setter函数
	      set(newValue) {
	        // 假设输入的newValue格式为 "First Last"
	        const names = newValue.split(' ');
	        if (names.length === 2) {
	          // 更新firstName和lastName
	          this.firstName = names[0];
	          this.lastName = names[1];
	        } else {
	          console.warn('Invalid full name format.');
	        }
	      }
	    }
	  },
	  watch: {
	    // 当firstName或lastName变化时，同步更新computedFullName
	    firstName(newVal) {
	      this.computedFullName = newVal + ' ' + this.lastName;
	    },
	    lastName(newVal) {
	      this.computedFullName = this.firstName + ' ' + newVal;
	    }
	  }
	};
</script>

getter的应用场景

1. 数据加工与展示: 当组件的模板需要显示的数据不是直接来自data属性，而是需要经过计算、过滤或格式化后的结果时，使用getter。例如，格式化日期、计算总数、处理条件逻辑展示等。

2. 简化模板逻辑: 通过在computed中处理复杂的计算逻辑，可以让模板代码更加简洁易读。这样可以避免在模板中嵌入过多的逻辑判断和运算，保持模板的声明式特性。

3. 性能优化: Vue会缓存getter的结果，只有当依赖的数据发生变化时，才会重新计算。这意味着对于开销较大的计算，只需计算一次，之后直接复用结果，直到依赖数据变化。

4. 避免不必要的DOM更新: 因为getter的自动缓存机制，只有当它依赖的响应式属性变化时，才会重新计算并更新视图，有助于减少不必要的DOM操作，提高性能。

5. 逻辑复用: 通过computed定义的getter可以在组件的多个地方甚至其他组件中复用，有助于代码的模块化和减少重复逻辑。

6. 状态衍生: 当组件的状态（data属性）比较基础，而UI需要展示的是这些基础状态的衍生状态时，使用getter来派生这些状态是非常自然的选择。

Setter的应用场景

1. 双向数据绑定: 当你希望一个基于其他数据计算得出的值也能够被用户编辑，并且编辑后能相应地改变原始数据时，就会用到setter。例如，一个表单中的全名字段可能由firstName和lastName计算而来，但用户直接修改全名时，你也希望通过setter来自动更新firstName和lastName。

2. 数据同步: 在复杂的应用中，可能有些数据是通过多个源数据计算得来的，但同时也需要能够直接修改并反映到源数据上。这时，使用setter可以确保所有的依赖关系都得到同步更新。

3. 格式化与反格式化: 当显示数据时需要某种格式（如日期格式化），但保存时需要原始数据格式，你可以在getter里做格式化，在setter里做反格式化处理。

4. 数据验证: 在设置计算属性的值时，可以通过setter来执行数据验证逻辑。如果新值不符合要求，可以抛出错误或调整值以符合预期。

5. 性能优化: 使用计算属性而不是直接操作数据，可以利用Vue的依赖追踪系统，仅在相关依赖发生变化时重新计算，提高性能。当需要响应式地改变这些依赖项时，setter提供了高效更新的途径。

6. 逻辑抽象: 通过将复杂的业务逻辑封装在计算属性的getter和setter中，可以使组件的模板更简洁，逻辑更清晰，易于维护。