了解Vue中的 computed 计算属性

目录

1. computed计算属性介绍和基础语法

1.1. 概念

1.2. 语法

2. “计算属性”和“方法”的对比

2.1. computed 计算属性

2.1.1. 作用

2.1.2. 语法

2.2. methods 方法

2.2.1. 作用

2.2.2. 语法

2.2.3. 缓存特性（提升性能）

3. computed 计算属性的完整写法

3.1. 问题引入

3.2. 解决

3.3. computed 计算属性的完整写法

---

1. computed计算属性介绍和基础语法

1.1. 概念

• 基于现有的数据，计算出来的新属性
• 依赖的数据变化，自动重新计算

1.2. 语法

• 声明在 computed 配置项中，一个计算属性对应一个函数
• 使用起来和普通属性一样使用 {{ 计算属性名 }}

计算属性 === 将一段 求值的代码 进行封装

 

2. “计算属性”和“方法”的对比

2.1. computed 计算属性

2.1.1. 作用

• 封装了一段对于数据的处理，求得一个结果

2.1.2. 语法

• 写在 computed 配置项中
• 作为属性，直接使用

this.计算属性

{{ 计算属性 }}

2.2. methods 方法

2.2.1. 作用

• 给实例提供一个方法，调用以处理业务逻辑

2.2.2. 语法

• 写在 methods 配置项中
• 作为方法，需要调用

this.方法名( )

{{ 方法名() }}

@事件名="方法名"

2.2.3. 缓存特性（提升性能）

• 计算属性会对计算出来的结果缓存，再次使用直接读取缓存
• 依赖项变化了，会自动重新计算 ，并再次缓存

 

3. computed 计算属性的完整写法

3.1. 问题引入

• 计算属性默认的简写，只能读取访问，不能 "修改

3.2. 解决

• 如果要 "修改"，需要写计算属性的完整写法

3.3. computed 计算属性的完整写法