vue中的computed（计算属性）和watch(监听属性)的特点，以及深度监听

 1//计算属性是根据data中已有的属性，计算得到一个新的属性，
 2 <div>全名：{{fullName}}</div>
 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.lastName
11     }  
12    lasttName(newVal,oldVal){
13          this.watchFullName=this.firstName+oldVal
14     }  
15 }


下面这一段是对路由参数的监听，这是一个组件，watch可以实时的获取到参数的值。

 1 var shop=Vue.component('shop',{
 2             template:`
 3                 <div>要显示的商品编号{{$route.params.id}}</div>
 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 }