vue入門筆記體系（四）computed和watch

Forest10 發布于2019-08-23 10:34 / 3262人閱讀

摘要：場景當需要對的數據進行顯示計算時計算屬性的指向實例計算屬性緩存方法計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。

computed

場景：當需要對data的數據進行顯示計算時；


  Original message: "{{ message }}"
  Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  el: "#example",
  data: {
    message: "Hello"
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split("").reverse().join("")
    }
  }
})

計算屬性緩存 vs 方法

計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。（不接受新的參數，只是基于data里面的數據進行計算）
方法是只要其他數據發生變化，觸發重新渲染時，調用方法將總會再次執行函數，性能開銷比較大。（可以接受參數）

watch

場景：監聽到數據的變化，去指定響應的操作

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) { //變化后的值，變化前的值
      console.log("new: %s, old: %s", val, oldVal)
    },
    // 方法名
    b: "someMethod",
    // 深度 watcher，可以觀察objecct的所有數據變化，性能開銷比較大；可以監聽"e.a"這個屬性進行監聽
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 該回調將會在偵聽開始之后被立即調用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f"s value: {g: 5}
    "e.f": function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96475.html

vue入門筆記體系（一）vue實例

摘要：就是實例中的對象當前組件接收到的對象。當前組件數的根實例如果當前實例沒有父實例，此實例將會是其自己當前實例的直接子組件。 vue實例每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的： var vm = new Vue({ // 選項 }) 當創建一個 Vue 實例時，你可以傳入一個選項對象。作為參考，你也可以在 api/#選項-數據文檔中瀏覽完整的選...

microelec 2019-08-26 17:42 評論0 收藏0
003-讀書筆記-Vue官網計算屬性與監聽器

摘要：監聽器監聽器的作用就是監視實例中的內容變化的。需要監聽哪個屬性，就把屬性的名字寫在監聽器中。總結監聽器的一般寫法監聽器的完整寫法，指定兩個參數參考內容計算屬性和觀察者 1.計算屬性 1-1 計算屬性概述計算屬性也是 Vue 實例的屬性，和 data 方法中返回的對象中的屬性是等同的存在。通常來說，計算屬性可以簡單理解：計算屬性其實就是 Vue 實例的一個屬性計算屬性一般依賴傳統...

dadong 2019-08-21 17:16 評論0 收藏0
Vue的computed和watch的細節全面分析

摘要：定義是一個計算屬性類似于過濾器對綁定到的數據進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應的作為計算屬性定義并返回對應的結果給這個變量變量不可被重復定義和賦值和用法回調函數當需要讀取當前屬性值是執行，根據相關數據計算并返回當前 1.computed 1.1 定義是一個計算屬性,類似于過濾器,對綁定到view的數據進行處理 1.2 get用法 data: { ...

lastSeries 2019-08-01 18:25 評論0 收藏0
Vue的computed和watch的細節全面分析

摘要：定義是一個計算屬性類似于過濾器對綁定到的數據進行處理用法不可在里面定義如果定義會報如下圖片的錯誤因為對應的作為計算屬性定義并返回對應的結果給這個變量變量不可被重復定義和賦值和用法回調函數當需要讀取當前屬性值是執行，根據相關數據計算并返回當前 1.computed 1.1 定義是一個計算屬性,類似于過濾器,對綁定到view的數據進行處理 1.2 get用法 data: { ...

CoderDock 2019-08-22 13:58 評論0 收藏0
vue學習筆記4

摘要：主要當作屬性來使用方法表示一個具體的操作，主要書寫業務邏輯一個對象，鍵是需要觀察的表達式，值是對應回調函數。父組件向子組件傳值組件實例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數據 // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0