vue 计算属性computed的应用

computed 计算属性应用

computed 计算属性

Vue本身支持模板中使用复杂表达式表现业务数据，但是这会使得模板内容过于杂乱，如果确有需求，可以通过computed 计算属性实现，computed 可以对其他data做复杂合成处理。

语法：

new Vue({
  el:xx,
  data:xx,
  computed:{
    // 属性名称:function(){}        普通函数赋值
    // 属性名称(){}                 简易成员函数赋值
    属性名称(){
      // 业务表达式实现，可以通过this操作data成员
      return  返回结果
    }
  }
})

注意：计算属性（普通函数赋值）或（简易成员函数赋值） 都可以，不要使用箭头函数。

使用：

形式上，如何应用data成员，就如何应用计算属性

{{ computed计算属性名称 }}     <!-- 模板中-->
this.XXX				    <!-- Vue实例内部-->

computed 应用场景

如果页面需要访问一个数据，这个数据比较复杂，是需要通过其他data经过复杂逻辑制作出来的，就可以使用“计算属性”。

computed 计算属性特点

1. 计算属性关联的data如果发生变化，会重新编译执行，获得并使用对应新结果，即响应式(入口)。
2. 计算属性的返回信息有变化，使用的地方也会重新编译执行，存在出口响应式。
3. 计算属性内部可以使用this关键字访问data成员，与Vue对象等效。
4. 每个计算属性都需要通过return关键字返回处理结果。

computed 计算属性与methods方法的区别

1. computed计算属性本身有缓存，在关联的data没有变化的情况下，后续会使用缓存结果，节省资源，

   methods方法没有缓存，每次访问方法体都需要加载执行，耗费资源。

2. methods应用逻辑较复杂，例如内部可以嵌入ajax，或互相调用，而computed比较简单，只是操作data的。

computed 计算属性案例

通过computed计算属性获取并应用筛选的品牌数据

步骤：

1. 创建计算属性

   在Vue实例内部创建计算属性(与el、data、methods并列位置处)，名称为 brandFilters

   // 声明计算属性
   computed:{
     // 创建一个名称为brandsFilters的计算属性
     brandsFilters () {
       // 可以正常使用this关键字
       return this.brandList.filter(item=>{
         return item.name.includes(this.keywords)
       })
     }
   },
   

2. 应用计算属性

   <table v-if="brandsFilters.length>0">
     <tr>
       <td></td>
       <td>序号</td>
       <td>名称</td>
       <td>创建时间</td>
       <td>操作</td>
     </tr>
     <tr v-for="(item,k) in brandsFilters" :key="item.id">
       <td><input type="checkbox"></td>
       <td>{{ item.id }}</td>
       <td>{{ item.name }}</td>
       <td>{{ item.ctime }}</td>
       <td><button @click="del(k)">删除</button></td>
     </tr>
   </table>