vue中的computed（計算屬性）和watch(監聽屬性)的特點，以及深度監聽

//計算屬性是根據data中已有的屬性，計算得到一個新的屬性，
<div>全名：{{fullName}}</div>
創建計算屬性通過computed關鍵字，它是一個對象
計算屬性是基於他們的依賴進行緩存的,computed是對data中的一些數據進行操作，避免在標簽中進行操作，
computed：{
    fullName(){
      return this.firstName+lastName              
  }
}

此時的fullName為一個自定義的名稱，代表了一個計算的封裝函數，此時代表了兩個字符串的拼接和，
而不是直接在頁面上進行計算，計算屬性就起到了這個作用。

 

 watch 監聽屬性  2 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 的應用場景為一些異步的操作。

深度監聽  2 深度監聽是為了監聽對象中的數據變化
data:{
    user{
        name:"zhangsan"
    }
}

user:{
 handler(newVal,oldVal){
        console.log(newVal.name)
    //這樣就可以打印一個新的user對象中的name值
    },
      deep:true  
}