166 lines
3.8 KiB
Markdown
166 lines
3.8 KiB
Markdown
# Vue2 计算属性详解文档
|
||
|
||
## 一、基本概念
|
||
|
||
计算属性（Computed Properties）是 Vue2 中用于声明式地定义派生数据的特性。它们基于响应式依赖进行缓存，只在相关依赖发生改变时才重新计算。
|
||
|
||
## 二、代码示例解析
|
||
|
||
```html
|
||
<div id="app">
|
||
姓：<input type="text" v-model="firstName">
|
||
名：<input type="text" v-model="lastName">
|
||
全名：<span>{{fullName}}</span>
|
||
</div>
|
||
|
||
<script>
|
||
const vm = new Vue({
|
||
el: "#app",
|
||
data() {
|
||
return {
|
||
firstName: "",
|
||
lastName: ""
|
||
}
|
||
},
|
||
computed: {
|
||
fullName: {
|
||
get() {
|
||
return `${this.firstName}-${this.lastName}`
|
||
},
|
||
set(val) {
|
||
// 可选的setter
|
||
}
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
```
|
||
|
||
## 三、核心特性
|
||
|
||
### 1. 计算属性 vs 方法
|
||
|
||
| 特性 | 计算属性 | 方法 |
|
||
| -------- | -------------------------- | --------------------------- |
|
||
| 缓存 | 有缓存，依赖不变不重新计算 | 每次调用都执行 |
|
||
| 调用方式 | 作为属性访问 | 需要调用执行 |
|
||
| 适用场景 | 派生数据 | 事件处理/需要重复执行的逻辑 |
|
||
|
||
### 2. 完整语法结构
|
||
|
||
```javascript
|
||
computed: {
|
||
属性名: {
|
||
get() {
|
||
// 计算逻辑
|
||
return 派生值
|
||
},
|
||
set(value) {
|
||
// 可选的反向更新逻辑
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 简写形式（只读场景）
|
||
|
||
```javascript
|
||
computed: {
|
||
fullName() {
|
||
return `${this.firstName}-${this.lastName}`
|
||
}
|
||
}
|
||
```
|
||
|
||
## 四、最佳实践
|
||
|
||
1. **命名规范**：
|
||
- 使用名词形式（如 `fullName`）
|
||
- 避免动词开头（这是方法的命名习惯）
|
||
|
||
2. **纯计算逻辑**：
|
||
- 不要在getter中执行异步操作或副作用
|
||
- 复杂计算考虑拆分为多个计算属性
|
||
|
||
3. **setter使用场景**：
|
||
- 当需要反向更新依赖数据时
|
||
- 示例：
|
||
```javascript
|
||
set(val) {
|
||
const parts = val.split('-');
|
||
this.firstName = parts[0] || '';
|
||
this.lastName = parts[1] || '';
|
||
}
|
||
```
|
||
|
||
## 五、高级用法
|
||
|
||
### 1. 依赖多个数据源
|
||
|
||
```javascript
|
||
computed: {
|
||
summary() {
|
||
return `总计：${this.items.length}件，${this.totalPrice}元`
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 结合过滤器使用
|
||
|
||
```javascript
|
||
computed: {
|
||
formattedDate() {
|
||
return dayjs(this.rawDate).format('YYYY-MM-DD')
|
||
}
|
||
}
|
||
```
|
||
|
||
### 3. 计算属性嵌套
|
||
|
||
```javascript
|
||
computed: {
|
||
baseInfo() {
|
||
return { ...this.user, age: this.calcAge }
|
||
},
|
||
calcAge() {
|
||
return new Date().getFullYear() - this.user.birthYear
|
||
}
|
||
}
|
||
```
|
||
|
||
## 六、性能优化
|
||
|
||
1. **减少大数组计算**：
|
||
```javascript
|
||
computed: {
|
||
visibleItems() {
|
||
return this.items.filter(item =>
|
||
item.name.includes(this.search) &&
|
||
item.status === 'active'
|
||
)
|
||
}
|
||
}
|
||
```
|
||
|
||
2. **避免频繁计算**：
|
||
- 对于复杂计算考虑使用 `methods` + 防抖
|
||
- 或使用 `watch` 手动控制计算时机
|
||
|
||
3. **缓存利用**：
|
||
- 相同依赖多次访问不会重复计算
|
||
- 模板中可安全多次引用同一计算属性
|
||
|
||
## 七、常见问题
|
||
|
||
1. **为什么计算属性不更新？**
|
||
- 检查依赖数据是否是响应式的
|
||
- 确保没有在getter中意外修改了依赖数据
|
||
|
||
2. **何时使用计算属性 vs watch？**
|
||
- 计算属性：基于多个数据的派生数据
|
||
- watch：需要在数据变化时执行异步或开销较大的操作
|
||
|
||
3. **计算属性能接收参数吗？**
|
||
- 不能直接接收参数，如需参数化应使用方法
|
||
- 替代方案：返回函数或使用闭包
|