1//计算属性是根据data中已有的属性，计算得到一个新的属性， 2 
     
      全名：{
   {fullName}}
     
 3 创建计算属性通过computed关键字，它是一个对象 4 计算属性是基于他们的依赖进行缓存的,computed是对data中的一些数据进行操作，避免在标签中进行操作， 5 computed：{ 6     fullName(){ 7       return this.firstName+lastName               8   } 9 }10 11 此时的fullName为一个自定义的名称，代表了一个计算的封装函数，此时代表了两个字符串的拼接和，12 而不是直接在页面上进行计算，计算属性就起到了这个作用。

 

1  watch 监听属性 2 watch属性和computed属性类似，是为了监听data中的数据的变化，只要监听的数据一发生变化，它就能执行相应的函数， 3  4 watch属性的名字必须为data中对应数据的名字 5  6 data中有firstName=""   lastName=""    watchFullName="" 7 参数newVal  和oldVal分别是新值和旧值    8 watch：{ 9    firstName(newVal,oldVal){10          this.watchFullName=newVal+this.lastName11     }  12    lasttName(newVal,oldVal){13          this.watchFullName=this.firstName+oldVal14     }  15 } 下面这一段是对路由参数的监听，这是一个组件，watch可以实时的获取到参数的值。

1 var shop=Vue.component('shop',{ 2             template:` 3                 
      
       要显示的商品编号{
    {$route.params.id}}
      
 4             `, 5             // mounted(){
      6             //     console.log(this.$route.params) 7             // }, 8             // 通过监听来实现动态获取路由参数 9             watch:{10                 $route(to,from){11                     console.log(to.params)12                     console.log(from.params)13                 }14             }15         })

 

computed 和watch对比来看的话虽然都能实现相同的功能，但是在一些相类似的应用场景中，一般都用computed 因为computed(计算属性)有一个缓存机制，如果后来的代码依赖于计算属性所得出的值，那么后来的计算值将会取自第一次计算所得值的缓存，这样就避免了一个值多次进行计算，影响代码的执行效率，

watch 的应用场景为一些异步的操作。

1 深度监听 2 深度监听是为了监听对象中的数据变化 3 data:{ 4     user{ 5         name:"zhangsan" 6     } 7 } 8  9 user:{10     handler(newVal,oldVal){11         console.log(newVal.name)12     //这样就可以打印一个新的user对象中的name值13     },14       deep:true  15 }