vue的计算属性和侦听器

1.计算属性：computed
逻辑比较复杂的如果写在模板里面会比较难以维护。此时就用到了计算属性。
例如：<span>{{fullName}}</span>
data里面： firstName:'alice',
lastName:'wang',
computed里面：computed:{
fullName(){
return this.firstName+this.lastName
}
}
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这样更加节约性能。如果一个需求在侦听器，方法以及计算属性都可以完成的情况下。优先使用计算属性。
计算属性的 setter和getter
seter可以监听数据的改变并且可以进行一些操作。如下例子中可以监听到allValue的改变。从而可以进行逻辑以及数据的操作。
例如： allValue: {
set: function(newValue, oldValue) {
console.log(newValue);
this.listShow.forEach(item => (item.flag = newValue));
}
},
getter可以监听数据的改变并且进行计算：(此需求是列表全选的需求)
computed:{
fullName:{
get: function() {
get: function() {
var flag = true;
for (let index = 0; index < this.listShow.length; index++) {
var item = this.listShow[index];
if (!item.flag) {
flag = false;
break;
}
}
return flag;
},
}
}
vue侦听器
watch: {
// 如果 question 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},