一、基础语法

Vue 中给每一个实例对象都提供了一个 computed 属性，用来设置 Vue 实例的“计算属性”。
语法结构：

  1. new Vue({
  2.     computed: {
  3.         属性名一() {
  4.             return 属性值一;
  5.         },
  6.         属性名二() {
  7.             return 属性值二;
  8.         }
  9.     }
  10. })

注意：虽然从代码层面看，计算属性是一个方法，但是在使用时，我们需要把它当作一个属性来使用，也就是说不需要加小括号调用。

  1. <h1>{{计算属性名}}</h1>

使用计算属性，通常需要满足以下两个条件：

  1. 需要从 data 原数据的基础之上，经过一些操作得到一条新数据；
  2. 得到新数据的同时，不会改变原数据；

    二、计算属性的缓存

    计算属性的缓存是指当一个计算属性被使用多次时，只会执行一次。
    1. <h1>{{计算属性名}}</h1>
    2. <h1>{{计算属性名}}</h1>
    3. <h1>{{计算属性名}}</h1>
    计算属性在第一次使用时，会执行对应的方法，并将执行结果缓存下来。后续每次使用该计算属性，都可以直接读取缓存中的结果。

    计算属性和 methods 的区别

    实际上，计算属性能实现的效果，methods 方法也都能实现。例如：
    1. <h1>{{reverseMsg}}</h1>
    2. <h1>{{reverseMsg}}</h1>
    3. <h1>{{reverseMsg}}</h1>
    4. <h2>{{getReverseMsg()}}</h2>
    5. <h2>{{getReverseMsg()}}</h2>
    6. <h2>{{getReverseMsg()}}</h2>
    7. <script>
    8.  new Vue({
    9.      el: '#app',
    10.      data() {
    11.          return {
    12.              msg: 'hello world'
    13.          }
    14.      },
    15.      computed: {
    16.          reverseMsg() {
    17.              console.log('计算属性执行了');
    18.              return this.msg.split("").reverse().join('');
    19.          }
    20.      },
    21.      methods: {
    22.          getReverseMsg() {
    23.              console.log('方法执行了');
    24.              return this.msg.split("").reverse().join('');
    25.          }
    26.      }
    27.  })
    28. </script>
    但是，区别就在于，计算属性有缓存，而 methods 没有缓存。所以 methods 每次使用的时候都会执行方法，使用几次就会执行几次。

    三、计算属性的修改

    前面常用的计算属性的语法，实际上是计算属性的简写。
    一个计算属性的完整写法，应该如下：
    1. new Vue({
    2.  computed: {
    3.      // 完整写法
    4.      计算属性名: {
    5.          get() {
    6.              return 计算属性值;
    7.          }
    8.      },
    9.      // 简写
    10.      计算属性名() {
    11.          return 计算属性值;
    12.      }
    13.  }
    14. })
    所有的计算属性，默认都有一个 get 方法，但是没有 set 方法，因此计算属性在默认情况下都不能修改。
    如果我们想要修改计算属性，需要自己手动添加一个 set 方法，语法结构如下：
    1. new Vue({
    2. computed: {
    3.  // 完整写法
    4.  计算属性名: {
    5.    get() {
    6.      return 计算属性值;
    7.    },
    8.    set(形参) {
    9.      // 根据形参修改计算属性依赖的原数据
    10.    }
    11.  }
    12. }
    13. })