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  
}