computed的setter和getter,详解computed属性中setter和getter的使用方法和注意事项
Computed 属性中的 Setter 和 Getter
在 JavaScript 的 Vue.js 框架中，computed 属性是一种非常有用的工具，用于处理基于其他数据属性的动态计算值。这些计算属性通常包含 getter 和 setter，它们允许我们定义计算属性的读取和写入行为。
1. Getter
定义：
Getter 是一个函数，当读取计算属性时会被调用。它通常用于返回基于其他数据属性的计算结果。
使用方法：
在 Vue 组件的 `computed` 属性中，你可以定义 getter 函数。这个函数会接收 `this` 上下文，并可以访问组件的实例数据。
javascript
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName: {
// getter
get() {
return this.firstName + ' ' + this.lastName;
}
}
}
}
在这个例子中，`fullName` 是一个计算属性，它的 getter 函数返回 `firstName` 和 `lastName` 的拼接结果。
注意事项：
Getter 函数不应该有副作用。它们应该是一个纯函数，只基于其输入（即组件的数据属性）进行计算并返回结果。
Getter 可以在函数内部使用 `this` 访问组件的实例数据。
2. Setter
定义：
Setter 是一个函数，当给计算属性赋值时会被调用。它通常用于处理基于其他数据属性的值更新。
使用方法：
在 Vue 组件的 `computed` 属性中，你可以定义 setter 函数。这个函数会接收两个参数：新值和旧值。
javascript
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName: {
// getter
get() {
return this.firstName + ' ' + this.lastName;
},
// setter
set(newValue) {
const names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
}
在这个例子中，`fullName` 是一个计算属性，它的 setter 函数接受一个 `newValue` 参数，并将其拆分为 `firstName` 和 `lastName`。
注意事项：
Setter 函数应该谨慎处理副作用。虽然它们可以更新组件的数据属性，但应该避免引发不必要的副作用，如网络请求或复杂的逻辑。
Setter 函数可以接收两个参数：新值和旧值。但在大多数情况下，我们只需要新值，因为旧值可以通过 `this` 上下文中的计算属性访问。
Setter 函数应该处理无效或不可用的值。例如，如果 `newValue` 不是有效的名字格式，你可能需要将其视为无效，并避免更新数据属性。
3. 使用场景
动态计算属性：
当你需要根据其他数据属性的变化动态更新计算属性时，可以使用 setter。例如，上面的 `fullName` 例子就是一个动态计算属性，它根据 `firstName` 和 `lastName` 的变化更新自己。
验证输入：
当你需要验证用户输入时，可以使用 setter。例如，你可以使用 setter 来验证 `fullName` 是否是一个有效的名字格式，并在必要时拒绝更新 `firstName` 和 `lastName`。
在 Vue.js 中，computed 属性是一种强大的工具，允许你定义基于其他数据属性的动态计算值。使用 getter 和 setter，你可以定义计算属性的读取和写入行为，从而实现复杂的逻辑和验证。你应该谨慎使用 setter，避免不必要的副作用，并确保你的 getter 函数是一个纯函数。
