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)
          }
        }
      }
    }
  }
})