Vue计算属性的getter与setter以及侦听器

# 计算属性的Getter 和 Setter：

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

var vm = new Vue({
  el: '#app',
  data: {
	firstName: 'Foo',
	lastName: 'Bar',
  },
  computed: {
	fullName() {
     get: function () { // 通过 var x =  this.fullName 的方式获取fullName的值时，触发 getter
		return this.firstName + ' ' + this.lastName;
     },
     set: function(val) { // 通过 this.fullName = 'xx zz' 的方式设置fullName的值时，触发 setter
		var names = val.split(' ');
		this.firstName = names[0];
		this.lastName = names[names.lenght - 1]
     },
   },
  },
});

# 侦听器：

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的：

下面示例中的 debounce 方法是lodash提供的，作用是：
在某个行为触发后 n秒【第二个参数传延迟时间】 执行 回调方法【第一个参数传回调方法】，如果在延迟时间内再次触发该行为，延迟时间重置：
在下面案例中，用户输入是一种行为，该行为触发后 500毫秒内，当用户再次执行输入操作时，时间重置，继续判断以当前操作时间为起始的 500毫秒内用户是否再次执行操作，以此循环。如果 500毫秒内，用户如果没有再次输入，则触发 this.getAnswer 方法。

<div id="watch-example">
  <p>
     Ask a yes/no question: 
     <input v-model="question">
  </p>
  <p>{{ answer }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

<script>
  var vm = new Vue({
    el: '#watch-example',
    data: {
       question: '',
       answer: '除非你问问题，否则我不能给你答案！',
    },
    watch: {
	  // 如果 question 发生改变，这个函数就会运行
	  question: function (new, old) {
	  	this.answer = '等待你停止打字';
	  	this.debouncedGetAnswer();
	  },
	  created() {
		this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
      },
      methods: {
		getAnswer() {
			if (this.question.indexOf('?') === -1) {
			   this.answer = '';
			   return;
			}
			this.answer = '请求中...';
			var vm = this;
			axios.get('https://yesno.wtf/api')
			  .then(() => {
				this.answer = _.capitalize(response.data.answer);	
			  }).catch((error) => {
				this.answer = '错误，无法访问API' + error;
			 });
		},
	  },
	},
  });
</script>

参数文献：

Vue官网