computed:快速理解setter和getter

計算屬性定義：當其依賴的屬性的值發生變化時，這個屬性的值會自動更新；同時，與其相關的DOM也會同步更新。

運用範圍：模板內的表達式通常都是比較簡單的，這是vue設計模板的初衷；若是在模板中放入過多複雜的邏輯，會讓模板太重切難以維護。此時，須要使用計算屬性。(處理複雜邏輯，基於依賴緩存，當依賴發生改變時會從新取值)

簡單的Demo，實現setter和getter的使用，以下：
HTML部分以下：

<template>
  <div>
    <div>First Name:
      <el-input v-model="firstName" placeholder="請輸入內容"></el-input>
    </div>
    <div>Second Name:
      <el-input v-model="secondName" placeholder="請輸入內容"></el-input>
    </div>
    <div>Full Name:
      <el-input v-model="fullName" placeholder="請輸入內容"></el-input>
    </div>
  </div>
</template>

JS部分以下：

export default{
  data () {
    return {
      firstName: '',
      secondName: ''
    }
  },
  components: {},
  computed: {
    fullName: {
      get: function () {
        return this.firstName + ' ' + this.secondName
      },
      set: function (newVal) {
        let names = newVal.split(' ')
        this.firstName = names[0]
        this.secondName = names[1]
      }
    }
  }
}

實現的效果：firstName 、secondName 發生變化，fullName會自動更新；反過來，fullName的改變，firstName 和 secondName也會自動更新。