computed和watch例子

<p>课程总数：{{ total1 }}</p>

watch

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

var app = new Vue({
	el: '#app',
	data(){
		return{
        total:8,
        total1:9,
        form:{
			modal:''
		}
      }
  },
    watch:{
        total:{
            immediate:true,//immediate作用,当值第一次进行绑定的时候并不会触发watch监听,immediate可以在最初绑定的时候执行。
            //deep:true,//对整个对象深层监听，需要用到该属性，其他不用，注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到，即数组（一维、多维）的变化不需要通过深度监听
            handler(newVal,oldVal){
                this.total1=newVal+'门'
            }
        },
        //或者这么写，但是减少了很多属性
         total(newVal,oldVal){
           this.total1=newVal+'门'
        },
        'form.modal'(newVal,oldVal){//对象单属性监听，第一个参数表示改变后的新值，第二个参数表示改变前的值。
        	
		}
    }
});

computed

methods每次调用时会重新执行函数，而computed在其内部变量不变或其返回值不变的情况下多次调用只会执行一次，后续执行时直接从缓存中获取该computed的结果。
当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
computed比较适合对多个变量或者对象进行处理后返回一个结果值。
应用场景：购物车总价

var app = new Vue({
  el: '#app',
  data(){
      return{
          total:8,
      }
  },
  computed:{
      total1(){
          return this.total+'门'
      }
  }
});

计算属性默认只有getter，不过在需要时你也可以提供一个setter