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

//计算属性是根据data中已有的属性，计算得到一个新的属性，
 <div>全名：{{fullName}}</div>
 创建计算属性通过computed关键字，它是一个对象
 计算属性是基于他们的依赖进行缓存的,computed是对data中的一些数据进行操作，避免在标签中进行操作，
 computed：{
     fullName(){
       return this.firstName+lastName
   }
 }

 此时的fullName为一个自定义的名称，代表了一个计算的封装函数，此时代表了两个字符串的拼接和，
 而不是直接在页面上进行计算，计算属性就起到了这个作用。

  watch 监听属性
 watch属性和computed属性类似，是为了监听data中的数据的变化，只要监听的数据一发生变化，它就能执行相应的函数，

 watch属性的名字必须为data中对应数据的名字

 data中有firstName=""   lastName=""    watchFullName=""
 参数newVal  和oldVal分别是新值和旧值
 watch：{
    firstName(newVal,oldVal){
          this.watchFullName=newVal+this.lastName
     }
    lasttName(newVal,oldVal){
          this.watchFullName=this.firstName+oldVal
     }
 }

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

 var shop=Vue.component('shop',{
             template:`
                 <div>要显示的商品编号{{$route.params.id}}</div>
             `,
             // mounted(){
             //     console.log(this.$route.params)
             // },
             // 通过监听来实现动态获取路由参数
             watch:{
                 $route(to,from){
                     console.log(to.params)
                     console.log(from.params)
                 }
             }
         })

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

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

 深度监听
 深度监听是为了监听对象中的数据变化
 data:{
     user{
         name:"zhangsan"
     }
 }

 user:{
    handler(newVal,oldVal){
         console.log(newVal.name)
     //这样就可以打印一个新的user对象中的name值
     },
       deep:true
 }