computed的 getter 和 setter

computed對象：里面的屬性為計算屬性，其中計算屬性的方式有2種。

第一種：計算屬性fullName為方法 fullName:function(){return ...}

第二種：計算屬性fullName為對象，此時此對象有2個方法，get與set方法

get方法：取值

set方法：此方法會傳入一個值，即可以手動設置值，改變相關聯的值，頁面的數據會重新渲染。

<div id="app">
    {{fullName}}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: "peng",
            lastName: "yidong"
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + " " + this.lastName
                },
                set(value) {
                    var arr = value.split(" ")
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                    console.log("set",value);
                }
            }
        }
    })
</script>

利用計算屬性的 getter 和 setter 實現數據的雙向綁定

 　　

<div id="example">
  <custom-input v-model="value"></custom-input>
  <p></p>
  value：{{ value }}
</div>

new Vue({
  el: '#example',

  data: () => ({
    value: '1'
  }),
 
  components: {
    CustomInput: {
      props: ['value'],
      template: `<input v-model="localValue" />`,
      computed: {
        localValue: {
          get() {
            return this.value
          },
          set(newValue) {
            this.$emit('input', newValue)
          }
        }
      }
    }
  }
})