監聽器和計算屬性

監聽器：

作用：

監聽vue例項上的資料變化

怎麼用

new Vue({
    watch:{
    要監聽的變數(變化後的值,變化之前的值){
        // 監聽的變數一發生改變就會執行這裡的方法
    }
  }

})

監聽路由的變化

new Vue({
    watch:{
    $route(變化後的值,變化之前的值){
        // 路由一發生改變就會執行這裡的方法
    }
  }

})

• 可以更改標題，根據不同的路由顯示不同的標題
• 解決bug，當我們路由引數變化的時候，介面不會重新初始化的bug

監聽物件

預設監聽的是物件的引用

當物件屬性變化的時候，沒有檢測到物件的變化，如何解決

1. 對物件進行深拷貝
2. 監聽物件的屬性的變化
3. 開啟深度監聽

new Vue({
    watch:{
    // 監聽物件的屬性的變化
    "obj.name"(變化後的值,變化之前的值){
        // 物件name一發生改變就會執行這裡的方法
    },
    //深度監聽
    obj:{
        handler(){
        物件一發生改變就會執行這裡的方法
      },
      deep:true
    }
  }

})

計算屬性

當某個屬性的值，是依賴於別的屬性生成，這個屬性就可以設定為計算屬性。

怎麼宣告：

new Vue({
    computed:{
    // 宣告的時候，聲名成了函式的形式
    fullName(){
      // 當他依賴的屬性變化的時候，會重新計算
        return 返回值就是計算的屬性的值
    }
  }
})

用的時候當做普通的屬性使用即可

計算屬性的賦值

計算屬性絕大多數是不需要的賦值的

new Vue({
    computed:{
    // 宣告的時候，聲名成了函式的形式
    fullName:{
      get(){
        // 獲取資料的時候會執行get
        return 值
      },
      set(value){
        // 設定資料的時候會執行set
      }
    }
  }
})
 

總結：

• 他是依賴於其他屬性的，是其它屬性的一個派生。
• 宣告的時候宣告成函式的，但是使用的時候當做屬性使用的
• 計算屬性會快取，只有它依賴的屬性變化的時候才會重新計算

計算屬性、函式和監聽器

• 計算屬性： 本質上是一個屬性，它別的屬性的一個派生。 計算屬性會進行快取，只有它依賴的屬性發生的時候才會重新計算（不能寫非同步操作的）
• 函式： 一般是寫業務邏輯的地方
• 監聽器： 當我們需要在某寫屬性變化的時候做一些業務處理的時候，需要用到監聽器。（可以新增非同步操作）