vue计算属性的setter

vue中计算属性的setter, 指的是通过计算属性, 更新data中的值

例如, 下面的例子

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<h2>计算属性的Setter例子</h2>
<div id="example">
        <p>无setter时,我应该显示data中的值,现在setter改变了data</p>
	<p>名字: <input type="text" v-model="firstName"></p>
	<p>姓氏: <input type="text" v-model="lastName"></p>
	<p>显示全名: {{fullName}}</p>
</div>
<script>
	var vm = new Vue({
		  el: '#example',
		  data: {
			firstName: '三',
			lastName: '张'
		  },
		computed: {
		  fullName: {
			// getter
			get: function () {
			  return this.firstName + ' ' + this.lastName
			},
			// setter
			set: function (newValue) {
			  var names = newValue.split(' ')
			  this.firstName = names[0]
			  this.lastName = names[names.length - 1]
			}
		  }
		}
	});
	//如果不添加下面这个调用,则是张三,再次调用后,firstName和lastName均会改变
	//这就是计算属性的setter
	vm.fullName = '四 李';
</script>

我们可以通过给vm.fullName设值, 改变了data中的firstName和lastName, 这就是setter