vue 计算属性和监听器（computed and watch）

模板内的表达式特别遍历，但是其设计初衷用于简单运算，在模板中放入太多的逻辑会让模板过于复杂以致难以维护

<p>
    <!--绑定表达式-->
    <!--课程总数：{{course.length+ '门'}}-->
    <!-- 计算属性 -->
    <!-- 课程总数:{{total}} -->
    <!-- 监听器 -->
    课程总数:{{totalCount}}
</p>
<script>
    const app = new Vue({
        computed: {
            total() {
            return this.courses.length + '门'
         } 
       },
// 下面这种不能生效，因为初始化时不会触发 
// watch: {
    // courses(newValue, oldValue) {
    	//this.totalCount = newValue.length + '门'
} },
})
</script>

• 计算属性vs监听器

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

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

// 输出vue替我们生成的渲染函数一窥究竟 
console.log(app.$options.render)

// 它长这个样子
(function anonymous(
){
with(this){return _c('div',{attrs:{"id":"app"}},[_c('h2',{attrs: {"title":title}},[_v("\n "+_s(title)+"\n ")]),_v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value: (course),expression:"course"}],attrs:{"type":"text"},domProps:{"value": (course)},on:{"keydown":function($event) {if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter" ))return null;return addCourse($event)},"input":function($event) {if($event.target.composing)return;course=$event.target.value}}}),_v(" "),_c('button',{on:{"click":addCourse}},[_v("新增课程")]),_v(" "),(courses.length == 0)?_c('p',[_v("没有任何课程信息")]):_e(),_v(" "),_c('ul',_l((courses),function(c){return _c('li',{class:{active: (selectedCourse === c)},on:{"click":function($event){selectedCourse = c}}}, [_v(_s(c))])}),0)])}
})

• 结论