vue学习day04-计算属性、computed计算属性与methods方法、计算属性完整写法

10、计算属性

（1）概念：

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

（计算属性->可以将一段求值的代码进行封装）

（2）语法：

1）声明在computed配置项中，一个计算属性对应于一个函数

2）使用起来和普通的属性一样{{计算属性名}}

（3）示例：

代码：

结果：

11、computed计算属性与methods方法

（1）computed计算属性

1）作用：封装了一段对于数据的处理，求得一个结果

2）语法：

①写在computed配置项中

②作为属性，直接使用->this.计算属性{{计算属性}}

3）缓存特性：

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

（2）methods方法

1）作用：给实例提供一个方法，调用以处理业务逻辑

2）语法

①写在methods配置项中

②作为方法，需要调用 ->this.方法名（）{{方法名（）}} @事件名=“方法名”

（3）示例

Computed

Methods

12、计算属性完整写法

计算属性默认的简写，只能读取访问，不能“修改”。如果要“修改”，需要计算属性的完整写法。

（1）示例：

代码：

结果：