computed计算属性

computed计算属性的作用是对数据的计算和缓存，优点是能够提高性能

基本使用

<template>
  <div>
  <p>{{reverseStr}}</p>

  </div>
</template>
<script>
  export default {
    data(){
      return{
        str:"hello world"
      }
    },
    computed:{
      reverseStr(){
        return this.str.split("").reverse().join("")
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

需要注意点是模板中使用的就是返回的计算属性

 

 

 

使用计算属性需要注意点两个点，第一个是必须要有return返回，如果没有return会报错。第二个，要有依赖属性

<template>
  <div>
  <p>{{reverseStr}}</p>
<p>
{{reverStr()}}</p>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        str:"hello world"
      }
    },
    methods:{
       reverStr(){
         return this.str.split("").reverse().join("")
      }
    },
    computed:{
      reverseStr(){
        return this.str.split("").reverse().join("")//没有这个依赖，就和普通的methods没有什么区别
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

 

此时我们会看到二者实现的功能一样

 

 

 

上面的代码也能实现计算属性的功能，有什么区别？

答：缓存

计算属性侦听的是对应的依赖属性，如果依赖属性没有发生变化，此时就会将缓存的结果抛出，优点就是大大的增加加载性能

 

我们看下面的一个案例

<template>
  <div>
  <p>{{reverseStr}}</p>
  <p>{{reverStr()}}</p>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        str:"hello world"
      }
    },
    methods:{
       reverStr(){
         console.log(Date.now(),'普通methods')
         return this.str.split("").reverse().join("")
      }
    },
    computed:{
      reverseStr(){
         console.log(Date.now(),'计算属性computed')

        return this.str.split("").reverse().join("")//没有这个依赖，就和普通的methods没有什么区别
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>

并且在对应的函数中输入Date.now()，我们可以看到控制要对应的输出时间的变化

 

 

 我们此时将计算属性的使用和普通methods的使用都增加几次

 <div>
  <p>{{reverseStr}}</p>
  <p>{{reverseStr}}</p>
  <p>{{reverseStr}}</p>

  <p>{{reverStr()}}</p>
  <p>{{reverStr()}}</p>
  <p>{{reverStr()}}</p>

  </div>

此时我们再看浏览器

 

 

 computed只输出了一次，说明computed利用缓存进行判断，发现依赖的str没有发生变化，所以直接抛出结果了，没有再次编译。

computed除了能够获取属性值，还可以进行设置，书写方法，是将computed内部的函数变为对象，然后增加get和set函数

我们看下面的一个案例

<template>
  <div>
    <table>
      <tr>
        <td><input v-model="isChecked" type="checkbox">全选</td>
        <td>产品名称</td>
        <td>产品单价</td>
        <td>产品数量</td>
        <td>金额</td>
      </tr>
      <tr v-for="(item,index) in dataList" :key="index">
        <td><input v-model="item.isCheck" type="checkbox"></td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td><input :min="0" v-model="item.num" @input="changePri(item.num,index)" type="number" style="width:40px;"></td>
        <td>￥{{item.amount}}</td>
      </tr>
    </table>
    <p style="color:red;">
     总价：￥{{totalPrice}}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dataList:[
          {isCheck: false, name:'苹果',price:'10',num:0, amount:0},
          {isCheck: false, name:'香蕉',price:'20',num:0, amount:0},
          {isCheck: false, name:'草莓',price:'30',num:0, amount:0},
        ]
      }
    },
    methods:{
      changePri(num,index) {
        //修改对应的金额
        this.dataList[index].amount = this.dataList[index].price * num;
      }
    },
    // 计算总价
    computed:{
      totalPrice() {
        let price = null
        for(var item of this.dataList) {
          if(item.isCheck) {
            price += item.amount
          }
        }
        return price
      },
      // 判断是否全选
      isChecked:{
        // 设置状态
        set(val) {
          // 设置内容
          if(val) {
            this.dataList.map((item)=>item.isCheck = true)
          } else {
            this.dataList.map((item)=>item.isCheck = false)
          }
        },
        // 获取侦听
        get() {
          for(var item of this.dataList) {
            if(!item.isCheck) {
              return false;
            }
          }
          return true
        }
      }
    }
  }
</script>

<style>
  td{
    padding: 0 15px;
  }
</style>