//计算属性是根据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)

                 }

             }

         })

 深度监听

 深度监听是为了监听对象中的数据变化

 data:{

     user{

         name:"zhangsan"

     }

 }

 user:{

     handler(newVal,oldVal){

         console.log(newVal.name)

     //这样就可以打印一个新的user对象中的name值

     },

       deep:true

 }