015、计算属性(computed)

###一、计算属性
设计的初衷是为了进行简单的运算，以此来减少模板中逻辑的维护。当模板中用到了运算逻辑，建议使用运算属性（computed来代替methods中的方法）。

###2、基本写法

HTML:
<div v-for='item in newData'>筛选后的:{{item.name}}</div>
JS:
data () {
	return {
		oldData: [
        {
          id: 1,
          name: 111
        },
        {
          id: 2,
          name: 222
        },
        {
          id: 3,
          name: 333
        },
        {
          id: 4,
          name: 444
        },
        {
          id: 5,
          name: 555
        }
      ],
	}
},
computed: {
	// 计算属性的名称不可与data、watch属性都是唯一的
    newData: function () {
      return this.oldData.filter(function (product) {
        return product.id > 2
      })
    }
 },
/*
在计算属性中，this指向该组件实例；
若使用箭头函数时，所传参数为当前组件实例；写法如下：
newData: (vm) => {
   return vm.oldData.filter(function (product) {
       return product.id > 2
   })
}
*/

###3、计算属性和方法的异同
两者都可以实现相同的效果。
3.1、计算属性的结果可以被缓存，除非他的依赖发生变化时才会进行重新计算。即计算属性不是响应式的。
3.2、methods中的方法，只要页面被重新渲染调用方法时就会被执行。

温馨提示：扫码可以提问、交流。本人有各个行业的小程序前端代码，如有需要也可以扫码留言哦。