### Vue3 中
计算属性 `
get` 和 `
set`
方法的使用
在 Vue3 的
计算属性中，可以通过定义 `
get` 和 `
set`
方法来实现更复杂的逻辑处理。默认情况下，
计算属性只提供 `
get`
方法用于读取数据并返回结果；如果需要支持修改该
计算属性，则需额外定义 `
set`
方法。
#### 基本概念
计算属性的核心在于其响应式特性。当依赖的数据发生变化时，
计算属性会自动重新求值[^1]。通过显式声明 `
get` 和 `
set`
方法，开发者能够自定义这些行为：
- **`
get`
方法**: 负责返回
计算后的值，在模板或其他地方访问此
计算属性时触发。
- **`
set`
方法**: 当尝试给
计算属性赋新值时被调用，允许更新原始数据源。
以下是具体示例展示如何在项目中应用这两种
方法。
---
#### 示例代码
下面是一个完整的 HTML 文件例子，演示了如何利用 Vue3 创建具有 `
get` 和 `
set` 功能的
计算属性。
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta char
set="UTF-8">
<title>Vue3
计算属性 Get/
Set</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<!-- 显示 fullName -->
<p>{{ fullName }}</p>
<!-- 修改 firstName 或 lastName 来观察变化 -->
First Name: <input v-model="firstName"><br><br>
Last Name: <input v-model="lastName"><br><br>
<!-- 直接设置 fullName 测试
set 效果 -->
Set Full Name: <input v-model="fullName">
</div>
<script>
const App = {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName: {
//
Getter 函数
get() {
return `${this.firstName} ${this.lastName}`;
},
//
Setter 函数
set(newValue) {
const parts = newValue.split(' ');
this.firstName = parts[0];
this.lastName = parts[1];
}
}
}
};
// 挂载实例到 DOM 上
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
```
在这个案例里：
- 用户输入新的全名（如 `"Jane Smith"`），则 `
set`
方法会被激活，并解析字符串以同步更新 `firstName` 和 `lastName`
属性[^2]。
- 反之，每当单独调整姓氏或名字字段时，由于绑定了双向绑定指令 (`v-model`) ，视图层也会即时反映最新组合而成的名字[^4]。
---
#### 进阶场景——批量状态管理
除了简单的姓名拼接外，还可以借助类似的机制完成更多复杂操作，比如控制列表项的选择状态等。如下所示的是另一个基于数组筛选的例子：
```javascript
export default {
data() {
return {
items: [
{ name: 'Item A', selected: false },
{ name: 'Item B', selected: true },
{ name: 'Item C', selected: false }
]
};
},
computed: {
allSelected: {
get() {
return this.items.every(item => item.selected);
},
set(value) {
this.items.forEach(item => item.selected = value);
}
}
}
};
```
这里实现了这样一个功能：当所有条目都被选定时，“全部选定”的勾选项也应处于开启状态；反之亦然。同时提供了统一切换的功能[^3]。
---
### 总结
综上所述，Vue3 提供了一种优雅的方式来构建动态交互界面，其中
计算属性扮演着重要角色。它不仅简化了许多重复性的编码工作量，还增强了程序可维护性和性能表现。对于那些既希望保持简洁又追求灵活性的应用开发而言，合理运用好 `
get`/`
set` 是非常必要的技能之一。
博客围绕计算属性的get和set方法展开，但具体内容缺失。通常get方法用于获取计算属性的值，set方法用于设置计算属性的值，在编程中有着重要作用。
扫一扫
441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
