Vue 计算属性

前言

人生如逆水行舟，不进则退

简介

在vue中一些数据经常依赖于别的数据做出改变，且改变的逻辑也较复杂，这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的，要经常做出改变，而这个改变是其他数据改变导致的。

简单使用

<div id="app">
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{firstName+" "+lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{fullName}}</h2> 
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:'Key',
      lastName:'Ting'
    },
    computed:{
      //不加动词，这是计算属性，那么最好以属性命名，这里的写法是计算属性的简写
      fullName(){
        return this.firstName+" "+this.lastName
      }
        
    },
    methods:{
      getFullName(){
        return this.firstName+" "+this.lastName
      }
    }
  })
</script>
</body>
</html>

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      books:[
        {id: 1001, name: 'Unix编程艺术',price: 119},
        {id: 1002, name: '代码大全',price: 105},
        {id: 1003, name: '深入理解计算机原理',price: 99},
        {id: 1004, name: '现代操作系统',price: 109}
      ]
    },
    computed:{
      totalPrice(){
        //filter/map/reduce 高级用法
        let result = 0
        for(let i=0;i < this.books.length;i++){
          result += this.books[i].price
        }
        return result
      }
    }
  })
</script>

setter和getter

• 每个计算属性都包括一个getter和一个setter
• 语法糖情况下，表示getter，取数据
• setter一般不用，所以我们常称计算属性为只读属性。

<div id="app">
  <h2>{{fullName}}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:'Key',
      lastName:'Ting'
    },
    computed:{
      //不加动词，这是计算属性，那么最好以属性命名
      //语法糖，简写
      // fullName(){
          // `this` 指向 app 实例
      //   return this.firstName+" "+this.lastName
      // }
        //规范格式
      fullName:{
        //计算属性中set方法一般不使用，只是一个只读属性
        set(newValue){
          console.log('-------------',newValue);
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get(){
          return this.firstName+" "+this.lastName
        }
      }
    }
  })
</script>

计算属性和methods对比

methods和computed看起来都可以实现我们的功能,那么为什么还要多一个计算属性这个东西呢？

官方：两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

原因：计算属性会进行缓存，如果多次使用,计算属性只会调用一次，极大提高了性能除非原属性发生改变，才会重新调用计算属性，更改属性值

<div id="app">
<!--  1.直接拼接:语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>
<!--  2.通过定义methods 每一个都会调用getfullname函数，如果很复杂，性能消耗是很大的 -->
  <h2>{{getFullName()}}</h2> 
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
<!--  3.通过computed 只会调用第一次，除非原属性发生改变，才会重新调用计算属性，更改属性值 -->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      firstName:'kebe',
      lastName:'bryant'
    },
    methods:{
      getFullName() {
        console.log('getFullName');
        return this.firstName+' '+this.lastName;
      }
    },
    computed:{
      fullName(){
        console.log('fullName');
        return this.firstName+' '+this.lastName;
      }
    }
  })
</script>