VUE - 计算属性computed的用法详解

一.基本用法

当需要对数据进行某些加工的时候推荐用计算属性：

<div id="app">
  <h2>{{fullName}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    // computed: 计算属性()
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

二.setting和getter

<div id="app">
// 读取计算属性时不加(),是读取fullName属性的值，读取的时候自动执行get方法获取返回值
  <h2>{{fullName}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    // computed: 计算属性
    computed: {
      fullName: {
       // 当读取计算属性fullName的时候，会调用get方法获取返回值
        get:function () {
          return this.firstName + ' ' + this.lastName
        },
       // 当修改计算属性fullName的时候，会调用set方法，很少用，一般省略
        set:function(newValue){
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        }
      }
    // 因此，计算属性通常简写为,对应计算属性的get方法
    // fullName:function(){}
    }
  })
</script>

三.计算属性的缓存

计算属性会缓存计算得出的值，只要计算属性相关的变量不改变，每次使用时就从缓存中读取，当对应的值发送变化时，才重新计算。

四.和method对比

methods每次调用都是执行代码，重新计算一遍

<div id="app">
  <h2>{{fullName}}</h2>
  <h2>{{fullName()}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    methods:{
     // 每次调用fullName()都会重新计算this.firstName + ' ' + this.lastName
      fullName(){
        return this.firstName + ' ' + this.lastName
      }
    },
    // computed: 计算属性
    computed: {
// 多次调用fullName 只要firstName,lastName没有变化，就从缓存中读取，如果发生变化，再重新计算
      fullName: function () {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>