1. 案例：用户输入信息，然后翻转用户输入的字符串。
      (1) 插值语法可以实现，但是有三个问题
      ①代码可读性差
      ②代码不可复用
      ③ 代码难以维护
      (2) 可以使用 methods 方式实现，存在 1 个问题
      ①效率低，即使数据没有发生变化，但每一次仍然会调用 method。
      (3) 使用计算属性可以解决以上问题。
      2. 什么是计算属性？
      data 中的是属性。用 data 的属性经过计算得出的全新的属性就是计算属性。
      3. 计算属性的使用
      1. <div id="app">
      2. <h1>{{msg}}</h1>
      3. 输入的信息：<input type="text" v-model="info"><br>
      4.  反转的信息：{{reversedInfo}} <br>
      5.  反转的信息：{{reversedInfo}} <br>
      6.  反转的信息：{{reversedInfo}} <br>
      7.  反转的信息：{{reversedInfo}} <br>
      8.  </div>
      9.  <script>
      10.  const vm = new Vue({
      11.  el : '#app', 
      12.  data : {
      13.    msg : '计算属性-反转字符串案例', 
      14.    info : '' 
      15.  }, 
      16.  computed : {
      17.    reversedInfo:{
      18.      get(){
      19.        console.log('getter 被调用了');
      20.        return this.info.split('').reverse().join('')
      21.      }, 
      22.      set(val){
      23.        //this.reversedInfo = val // 不能这样做，这样会导致无限递归
      24.        this.info = val.split('').reverse().join('')
      25.      }
      26.    }
      27.  }
      28. })
      29. </script>
      (1) 计算属性需要使用：computed
      (2) 计算属性通过 vm.$data 是无法访问的。计算属性不能通过 vm.$data 访问。
      (3) 计算属性的 getter/setter 方法中的 this 是 vm。
      (4) 计算属性的 getter 方法的调用时机：
      1 第一个时机：初次访问该属性。
      2 第二个时机：计算属性所依赖的数据发生变化时。
      (5) 计算属性的 setter 方法的调用时机：
      1当计算属性被修改时。（在 setter 方法中通常是修改属性，因为只有当属性值变化时，计算属性的 值就会联动更新。注意：计算属性的值被修改并不会联动更新属性的值。）
      (6) 计算属性没有真正的值，每一次都是依赖 data 属性计算出来的。
      (7) 计算属性的 getter 和 setter 方法不能使用箭头函数，因为箭头函数的 this 不是 vm。而是 window。
      4. 计算属性的简写形式
      只考虑读取，不考虑修改时，可以启用计算属性的简写形式。
      1. computed : {
      2. reversedInfo(){
      3.  console.log('getter 被调用了');
      4.  return this.info.split('').reverse().join('')
      5. }
      6. }