✨ D:\Project\Study\Java\vue-java-tutorials\vue2-tutorials\import-script\8-计算属性.md
This commit is contained in:
parent
5ca6962782
commit
45ffbb6cdd
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="js/vue@2.7.16.js"></script>
|
||||
<title>计算属性</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
姓：<input type="text" v-model="firstName" />
|
||||
名：<input type="text" v-model="lastName" />
|
||||
|
||||
全名：<span>{{fullName}}</span>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
const vm = new Vue({
|
||||
el: "#app",
|
||||
data() {
|
||||
return {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
computed: {
|
||||
fullName: {
|
||||
get() {
|
||||
return `${this.firstName}-${this.lastName}`
|
||||
},
|
||||
set(val) { }
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
# 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. **计算属性能接收参数吗？**
|
||||
- 不能直接接收参数，如需参数化应使用方法
|
||||
- 替代方案：返回函数或使用闭包
|
||||
Loading…
Reference in New Issue