1. 引言
通过前面的章节，我们已经学会了使用Axios通信框架来进行网络请求，有兴趣的同学可以参阅下：
- 《Vue系列教程（01）- 前端发展史》
- 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
- 《Vue系列教程（03）- Vue开发利器VsCode》
- 《Vue系列教程（04）- VsCode断点调试》
- 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
- 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
- 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
- 《Vue系列教程（08）- 基本语法》
- 《Vue系列教程（09）- 事件绑定》
- 《Vue系列教程（10）- Model数据内容双向绑定》
- 《Vue系列教程（11）- 组件详解》
- 《Vue系列教程（12）- Axios异步通信》
本文主要讲解的是vue的另外一种属性computed（计算属性）。
2. 计算属性
计算属性（computed） ：是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，可以想象为缓存!
2.1 案例
先上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入js文件--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <!--v-cloak 解决闪烁问题--> <style> [v-cloak] { display: none; } </style> </head> <body> <!--view层，模板--> <div id="app"> <label> <input type="text" v-model="message"> </label>{{message}} <p>currentTime1:{{currentTime1()}}</p> <p>currentTime2:{{currentTime2}}</p> </div> <script type="text/javascript"> const vm = new Vue({ el: "#app", data: { message: "" }, methods: { currentTime1: function () { return Date.now();//返回一个时间戳 } }, computed: { currentTime2: function () {//计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法 // this.message; return Date.now();//返回一个时间戳 } } }) </script> </body> </html>
运行结果：
描述：
currentTime1会随着输入框的改变而改变- 因为
computed里面的数据没有变化，每次显现的结果都是第一次缓存下来的
注意了，在computed里的currentTime2方法把this.message给注释了，现在把this.message解注释掉，看看效果。
可以看到，随着输入框的内容改变，currentTime1和currentTime2都改变了，这是为什么呢？原因是this.message是为了能够让currentTime2观察到数据变化而变化。
3. 小结
注意：
methods和computed里的东西不能重名methods：定义方法， 调用方法使用currentTime1()， 需要带括号computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：
计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。
