计算属性的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的应用场景
-
数据加工与展示: 当组件的模板需要显示的数据不是直接来自data属性,而是需要经过计算、过滤或格式化后的结果时,使用
getter
。例如,格式化日期、计算总数、处理条件逻辑展示等。 -
简化模板逻辑: 通过在
computed
中处理复杂的计算逻辑,可以让模板代码更加简洁易读。这样可以避免在模板中嵌入过多的逻辑判断和运算,保持模板的声明式特性。 -
性能优化: Vue会缓存
getter
的结果,只有当依赖的数据发生变化时,才会重新计算。这意味着对于开销较大的计算,只需计算一次,之后直接复用结果,直到依赖数据变化。 -
避免不必要的DOM更新: 因为
getter
的自动缓存机制,只有当它依赖的响应式属性变化时,才会重新计算并更新视图,有助于减少不必要的DOM操作,提高性能。 -
逻辑复用: 通过
computed
定义的getter
可以在组件的多个地方甚至其他组件中复用,有助于代码的模块化和减少重复逻辑。 -
状态衍生: 当组件的状态(data属性)比较基础,而UI需要展示的是这些基础状态的衍生状态时,使用
getter
来派生这些状态是非常自然的选择。
Setter的应用场景
-
双向数据绑定: 当你希望一个基于其他数据计算得出的值也能够被用户编辑,并且编辑后能相应地改变原始数据时,就会用到
setter
。例如,一个表单中的全名字段可能由firstName
和lastName
计算而来,但用户直接修改全名时,你也希望通过setter
来自动更新firstName
和lastName
。 -
数据同步: 在复杂的应用中,可能有些数据是通过多个源数据计算得来的,但同时也需要能够直接修改并反映到源数据上。这时,使用
setter
可以确保所有的依赖关系都得到同步更新。 -
格式化与反格式化: 当显示数据时需要某种格式(如日期格式化),但保存时需要原始数据格式,你可以在
getter
里做格式化,在setter
里做反格式化处理。 -
数据验证: 在设置计算属性的值时,可以通过
setter
来执行数据验证逻辑。如果新值不符合要求,可以抛出错误或调整值以符合预期。 -
性能优化: 使用计算属性而不是直接操作数据,可以利用Vue的依赖追踪系统,仅在相关依赖发生变化时重新计算,提高性能。当需要响应式地改变这些依赖项时,
setter
提供了高效更新的途径。 -
逻辑抽象: 通过将复杂的业务逻辑封装在计算属性的
getter
和setter
中,可以使组件的模板更简洁,逻辑更清晰,易于维护。