vue中的computed计算属性，报错Computed property “xxx“ was assigned to but it has no setter

vue中的computed计算属性

模板内可以是变量，可以是变量的逻辑表达式，也可以是方法。

{{ message }}
{{ message.split('').reverse().join('') }}
{{ messageFunction }}

以上均可，模板内尽量使用简洁的声明变量，这些复杂的表达式或者方法会使模板很重难以维护，这个时候需要用到计算属性
既然说计算属性和方法都能渲染，那区别是什么呢？
计算属性基于它们的响应式依赖进行缓存的，即变量发生变化以后才会执行计算函数，如果变量没有发生变化则每次页面渲染取得是缓存中的值。而方法是每次页面重新渲染都会执行方法。

<div id="example">
    <p>{{ fullName }}</p>
    <button @click="changeName">点击</button>
</div>
<script>
    var vm = new Vue({
      el: '#example',
      data () {
        return {
          firstName: 'zhang',
          lastName: 'sa1n'
        }
      },
      computed: {
        fullName () {
          return this.firstName + '' + this.lastName
        }
      },
      methods: {
        changeName () {
          vm.fullName = 'John Doe'
        }
      }
    })
  </script>

当想操作computed中的属性时，比如通过一个点击事件改变fullName的值。上面computed的写法是错误 的，此时控制台会报错
vue.js:634 [Vue warn]: Computed property “fullName” was assigned to but it has no setter.(found in )
因为changeName方法中的vm.fullName = 'John Doe’是给computed中的fullName重新赋值，setter 会被调用，computed中有默认的getter，但是没有setter，需要在set中进行操作
正确写法：

fullName: {
          get: function () {
            return this.firstName + '' + this.lastName
          },
          set: function (newValue) {
            console.log(newValue) // John Doe
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
          }
        }