vue中 computed的使用場景

1、如果顯示和方法中使用的時候類型切換
<input v-model="type" />這裏的type初始化的時候是數組['語文', '數學', '英語']，但是input中雙向綁定只支持數字和字符串基本數據類型，所以這裏就需要在數組和字符串直接切換

...
<template>
    <div>
        <input type="text" v-model="computedType" />
    </div>
</template>
...

data () {
    return {
        type: ['語文', '數學', '英語']
    }
},
computed: {
    // 他可以緩存數據，當依賴的數據發生變化時才重新計算。
    computedType: {
      get () {
        return this.type.join(',') // 字符串
      },
      set (val) {
        this.type = val.split(',') // 數組
      }
    }
    ...

2、computed是可以緩存數據的，當相關的變量發生變化的時候才重新計算
在搜索欄中可以使用，輸入就搜索，不需要單機搜索按鈕的情況，返回搜索結果

<template>
    <div>
        <input type="text" v-model="search" />
        <div>
            {{searchList}}
        </div>
    </div>
</tempalte>
...
data () {
    return {
        search: ''
    }
    ...
    computed: {
        searchList: {
            get () {
                return ['name': 'vaue']
            },
            set (val) {
                // 根據輸入內容 val調接口查詢，返回數據列表
                return [{'name': 'zxc'}, {name: 'hh']
            }
        }
    }