计算属性（computed）：优化在模版中写入过于复杂的逻辑
（另外一个优化data属性的方法filters）
- 计算属性是根据源数据衍生出来的新数据，既然是衍生的数据，那只要源数据在data中声明过即可，同时，计算属性的试图更新必须依赖于data属性的更新
- 计算属性的名称就是计算属性处理函数的名称，使用时可以在模版中绑定计算属性，绑定方法与data中的普通属性一致
// 基础用法
data() {
return {
str: 'string'
}
}
computed: {
beautifyStr() {
return this.str.split('');
}
}
计算属性的值依赖于普通属性，并且对普通属性进行缓存，只有当普通属性的值更新时，才会重新渲染计算属性，否则多次访问的计算属性均为之前该计算属性的缓存，并不会再次执行计算属性的回调函数
默认方法为getter，可添加setter方法
监听器（watch）：监听并处理data属性的更新
（感觉比侦听器更接地气 -_- ）
对data属性的监听，说明属性是在data中声明过的
属性更新时调用监听函数，可选参数分别为新值和旧值，对属性重新设置值，只要跟原来的值相等就不会触发函数调用，这一点跟计算属性是相似的
// 基础用法
watch: {
activeTab(newValue, oldValue) {
console.log(newValue, oldValue);
this.getList();
}
}
// 函数体调用Vue实例的方法可简写
watch: {
activeTab: 'getList'
}
immediate
属性初始化的值默认不会触发监听，解决办法添加说明immediate:true，表示监听初始值，此时使用handler写法
watch: {
activeTab: {
handler(newValue, oldValue) {
console.log(newValue, oldValue);
this.getList();
},
// 立即执行handler函数
immediate: true
}
}
deep
当被监听的属性为对象时，默认不会监听对象内部属性的变化，而是只监听属性被赋值时的变化，解决办法添加说明deep:true（默认为false），此时监听器会深度遍历给对象的每一个属性都带上监听器，更新写法
// 监听对象的所有属性
watch: {
activeTab: {
handler(newValue, oldValue) {
console.log(newValue, oldValue);
this.getList();
},
// 深度监听
deep: true
}
}
// 监听对象的某些属性
watch: {
'activeTab.index': {
handler(newValue, oldValue) {
console.log(newValue, oldValue);
this.getList();
}
}
}
另外组件中的监听器会随组建的注销而注销，不会造成内存溢出，但如果使用命令式的（ vm.$watch）全局的监听器需要手动注销才行
