vue计算属性computed的getter和setter

简单介绍

在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。

vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码：

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

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

其实computed里的代码完整的写法应该是：

computed: {
    fullName: {
      get(){
         return this.firstName + ' ' + this.lastName
      }
    }
  }

计算属性settter

computed: {
    fullName: {
      get(){
         return this.firstName + ' ' + this.lastName
      },
      set(newVal){
      	console.log(newVal)
      }
    }
 }