一、理解计算属性的概念，计算属性的英文是computed，其实很多时候，一些概念从英文对照为中文后，会导致其中一些含义发生错位与丢失，我们要想更好的理解computed计算属性，可以将这个概念分为两部分来看：

　　- 计算 ：这里的计算，是有种宏观的概念，指的是对于数据包的一种操作，比如:筛选、过滤、新增、删除等。 说明computed本身是具有处理数据的能力。

　　- 属性：属性的意思是，一种可以读取、渲染的数据，性质跟data的作用相似，说明computed最终会给出一个数据供页面渲染使用。 由此，我们可以得出一个结论: computed计算属性，负责将一些数据在其内部按照指定逻辑处理后，最终给出处理后的结果数据，给到组件、页面进行渲染使用，可以让开发者更加便捷的处理一些动态变化的数据需求。

　　二、computed计算属性的特点

　　1. computed内部对data做出处理，其处理结果可以像data一样，可以直接在页面中渲染。

　　2. computed内部逻辑会自动识别到data的变化，从而做出新的操作，得出新的数据，从而自动更新视图。

　　3. computed处理的数据具有缓存的能力，如果data不变，则页面中调用的都是computed第一次执行时的运算结果，提高渲染性能。

　　三、computed应用场景 当某个前端已经指定的data数据包，如果我们渲染前，对其有过滤、筛选等操作需求，就可以使用computed

　　1. 字符串翻转的官方案例，就是将一个普通字符串翻转后再渲染到视图。new Vue({ el:'#app',

　　//占地盘 data:{ 'msg':'Hello Vue' //自定义数据包 }, computed:{ reMsg(){ //专门用于反转msg的计算属性 return this.msg.split('').reverse().join('') } } })

　　2. 如果一个班级中有很多学生，每个学生通过一个对象来表达，现在我们需要根据学员成绩来进行动态切换显示：全部学员、及格学员、不及格学员，这种在本地进行筛选的需求可以快速通过computed实现，代码逻辑大致如下:

　　new Vue({ el:'#app', //占地盘 data:{ stu:[ {name:'张三丰',score:100}, {name:'DDK',score:50}, {name:'张翠山',score:60}, {name:'张无忌',score:90}, {name:'PDD',score:45} ], status:0 //0全部 1及格 2不及格 }, computed:{ filterStu(){ let {stu,status} = this // let stu = this.stu // let status = this.status switch (status) {

　　case 1: //及格 return stu.filter(item=>{ return item.score>=60 })

　　case 2: //不及格 let arr = stu.filter(item=>{ return item.score