類型：{ [key: string]: Function | { get: Function, set: Function } }

　　計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。註意，如果某個依賴 (比如非響應式屬性) 在該實例範疇之外，則計算屬性是不會被更新的。

　　computed用來監控自己定義的變量，該變量不在data裏面聲明，直接在computed裏面定義，然後就可以在頁面上進行展示出結果或者用作其他處理；

　　computed比較適合對多個變量或者對象進行處理後返回一個結果值，也就是數多個變量中的某一個值發生了變化則我們監控的這個值也就會發生變化，舉例：購物車裏面的商品列表和總金額之間的關系，只要商品列表裏面的商品數量發生變化，或減少或增多或刪除商品，總金額都應該發生變化。這裏的這個總金額使用computed屬性來進行計算是最好的選擇

<template>
<div>
  <ul>
    <li v-for="item in list" :key=‘item.name‘>
      <span>{{item.name}}</span>
      <input type="text" v-model="item.age">
    </li>
    <li>
      <span>總數</span>
      <span>{{totalAge}}</span>
    </li>
  </ul>
  <ul>
    <li>
      <input type="
 
text" v-model="setName">
      <input type="button" value="提交" @click="setFullName">
    </li>
    <li>
      <span>firstName</span>
      <input type="text" v-model="firstName">
    </li>
    <li>
      <span>lastName</span>
      <input type="
 
text" v-model="lastName">
    </li>
    <li>
      <span>fullName</span>
      <span>{{fullName}}</span> <!-- 不建議使用v-model來改變fullName的值，會出現問題，本來computed就是計算的意思 -->
      <!-- <input type="text" v-model="lastName"> -->
    </li>
  </ul>
</div>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            name: ‘nike‘,
            age: 25
          },
          {
            name: ‘adidias‘,
            age: 30
          },
          {
            name: ‘lining‘,
            age: 10
          }
        ],
        firstName: ‘‘,
        lastName: ‘‘,
        setName: ‘‘
      }
    },
    methods:{
      setFullName(){
        this.fullName = this.setName;//通過函數設置fullName,不建議v-model來設置fullName
      }
    },
    computed:{
      // 僅讀取
      totalAge(){
        let total = 0
        let me = this
        for (let i = 0; i < me.list.length; i++) {
          total += parseInt(me.list[i].age)
        }
        return total
      },
      // 讀取和設置
      fullName: { //
        //讀取
        get(){ //回調函數 當需要讀取當前屬性值是執行，根據相關數據計算並返回當前屬性的值
          return this.firstName + ‘ : ‘ + this.lastName;
        },
        //設置
        set(val){ //監視當前屬性值的變化，當屬性值發生變化時執行，更新相關的屬性數據
          //val就是fullName的最新屬性值
          console.log(val)
          const names = val.split(‘ ‘);
          console.log(names)
          this.firstName = names[0];
          this.lastName = names[names.length-1];
        }
      }
    }
  }
</script>
<style>
ul{
  width: 400px;
  margin: 0 auto;
}
li{
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
}
span{
  float: left;
  margin: 5px;
  padding: 0px 20px;
  width: 100px;
  text-align: right;
}
li span:nth-child(2){
  text-align: center;
}
input{
  height: 20px;
}
</style>

vue 的計算屬性computed自我理解