计算属性
理解
1、computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上获取到并进行相应的数据处理
2、computed里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。
案例：
<template>
<div @click='add'> + </div>
</template>
data(){
return{
num1: 11,
num2: 33
}
},
computed:{
total:function(){
return this.num1 + this.num2 //总分会随着num1，num2的变化而重新计算
},
},
methods:{
add(){
this.num1++
}
}
上面案例中total返回的是num1和num2的总和，且每次点击加号时total的值都会随着num1的变化而变化，由此可知计算属性可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。
计算属性的setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
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]
}
}
}
现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
侦听器 watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
例如：
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
}
},
当我们监听的数据发生变化时，相应的函数就会运行，这个函数的第一个参数是变化的值，第二个参数是原来的值
