【web高级 01vue 】 vue预习课04 计算属性和监听器

计算属性 和 监听器

模板内的表达式非常便利，但是设计他们的初衷是用于简单运算。在模板中放入太多的逻辑会让模板过重且难以维护，此时就可以考虑计算属性和监听器。
范例：数量统计

<!-- 商品总数 -->
      <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 监听器

• 监听器更通用，理论上计算属性能实现的侦听器也能实现
• 处理数据的场景不同，监听器适合一个数据影响多个数据，计算属性适合一个数据受多个数 据影响
• 计算属性有缓存性，计算所得的值如果没有变化不会重复执行
• 监听器适合执行异步操作或较大开销操作的情况， 范例

神奇的模板语法是如何实现的

在底层的实现上，Vue将模板编译成虚拟DOM渲染函数，结合响应系统，Vue能够智能地计算出最少需要重新熏染多少组件，并把DOM操作次数减少到最少

输出vue替我们生成的渲染函数一窥究竟

 console.log(app.$options.render);

它长这个样子

ƒ anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("初始化流程")]),_v(" "),_c('p',[_v(_s(foo))])])}
}

改写为渲染函数版本试试

结论：Vue通过它的编译器将模板编译成渲染函数，在数据发生变化的时候再次执行渲染函数，通过对比两次执行结果得出要做的dom操作，模板中的神奇魔法得以实现。