计算属性 和 监听器
模板内的表达式非常便利，但是设计他们的初衷是用于简单运算。在模板中放入太多的逻辑会让模板过重且难以维护，此时就可以考虑计算属性和监听器。
范例：数量统计
<!-- 商品总数 -->
<p>
<!-- 表达式 -->
<!-- 食物总数:{
{
foodList.length + '种'}} -->
<!-- 计算属性 -->
<!-- 食物总数:{
{
total}} -->
<!-- 监听器 -->
食物总数:{
{
totalCount}}
</p>
<script>
const app = new Vue({
el: "#app",
data() {
return {
foodList: ["萝卜", "白菜"],
totalCount: 0,
};
},
computed: {
total() {
//计算属性有缓存性：如果值没有发生变化，则页面不会重新渲染
return this.foodList.length + "种";
},
},
//默认情况下watch初始化时，不执行
// watch: {
// //这种写法的话，刚进入页面的时候，展示0，但是实际是2。怎么解决？
// //用带选项的watch
// //以后变化之后才会执行，刚开始不会执行
// foodList(newValue, oldValue) {
// this.totalCount = newValue.length + "种";
// },
// },
watch: {
foodList: {
immediate: true, //立即执行一次
//deep: true,//数据层层次深，结构复杂
handler(newValue, oldValue) {
this.totalCount = newValue.length + "种";
},
},
},
/*
computed 和 watch
从简洁性来说，computed更简洁
在开发中，如果能用computed实现，就先使用computed
computed具有缓存性，性能比较好，写出来比较简单
watch有立刻执行的问题，还需要在data里面额外的声明一些data属性
*/
});
</script>
计算属性 vs 监听器
- 语境上的差异
//一个值变化了，我要做些事情，适合做一个值影响多个值的情形
watch:{
firstName(newValue, oldValue){
this.fullName = this.firstName + " " + this.lastName
},
lastName(newValue, oldValue){
this.fullName = this.firstName + " " + this.lastName
}
}
//一个值由其他值得来，这些值变了我也要变，适合做多个值影响一个值的情形
computed:{
fullName(){
return this.firstName + " " + this.lastName
}
}
计算属性 vs 监听器
- 监听器更通用，理论上计算属性能实现的侦听器也能实现
- 处理数据的场景不同，监听器适合一个数据影响多个数据，计算属性适合一个数据受多个数 据影响
- 计算属性有缓存性，计算所得的值如果没有变化不会重复执行
- 监听器适合执行异步操作或较大开销操作的情况， 范例