计算属性和侦听属性
<p>
<!-- 绑定表达式 -->
<!-- 课程总数:{{courses.length + '门'}} --> <!-- 计算属性 -->
<!-- 课程总数:{{total}} -->
<!-- 监听器 -->
课程总数:{{totalCount}}
</p>
<script>
const app = new Vue({
computed: {
total() {
return this.courses.length + '门'
}
},
// 下面这种不能生效，因为初始化时不会触发
watch: {
courses(newValue, oldValue) {
this.totalCount = newValue.length + '门'
}
},
watch: {
courses: {
immediate: true,
// deep: true,
handler(newValue, oldValue) {
this.totalCount = newValue.length + '门' }
}
}
}
})
</script>
- 处理数据的场景不同，监听器适合一个数据影响多个数据，计算属性适合一个数据受多个数 据影响
- 计算属性有缓存性，计算所得的值如果没有变化不会重复执行
- 监听器选项提供了更通用的方法，适合执行异步操作或较大开销操作的情况
