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

Forest10 發(fā)布于2019-08-23 10:34 / 3255人閱讀

摘要：場景當(dāng)需要對的數(shù)據(jù)進(jìn)行顯示計(jì)算時計(jì)算屬性的指向?qū)嵗?jì)算屬性緩存方法計(jì)算屬性是基于它們的依賴進(jìn)行緩存的。計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時才會重新求值。

computed

場景：當(dāng)需要對data的數(shù)據(jù)進(jìn)行顯示計(jì)算時；


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

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

計(jì)算屬性緩存 vs 方法

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

watch

場景：監(jiān)聽到數(shù)據(jù)的變化，去指定響應(yīng)的操作

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的所有數(shù)據(jù)變化，性能開銷比較大；可以監(jiān)聽"e.a"這個屬性進(jìn)行監(jiān)聽
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 該回調(diào)將會在偵聽開始之后被立即調(diào)用
    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

GPU云服務(wù)器云服務(wù)器 vue3 學(xué)習(xí)筆記 (五)——vue3 vue入門教程 java開發(fā)入門筆記 webrtc和vue

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/96475.html

相關(guān)文章

vue入門筆記體系（一）vue實(shí)例

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

microelec 2019-08-26 17:42 評論0 收藏0
003-讀書筆記-Vue官網(wǎng) 計(jì)算屬性與監(jiān)聽器

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

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

摘要：定義是一個計(jì)算屬性類似于過濾器對綁定到的數(shù)據(jù)進(jìn)行處理用法不可在里面定義如果定義會報(bào)如下圖片的錯誤因?yàn)閷?yīng)的作為計(jì)算屬性定義并返回對應(yīng)的結(jié)果給這個變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計(jì)算并返回當(dāng)前 1.computed 1.1 定義是一個計(jì)算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進(jìn)行處理 1.2 get用法 data: { ...

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

摘要：定義是一個計(jì)算屬性類似于過濾器對綁定到的數(shù)據(jù)進(jìn)行處理用法不可在里面定義如果定義會報(bào)如下圖片的錯誤因?yàn)閷?yīng)的作為計(jì)算屬性定義并返回對應(yīng)的結(jié)果給這個變量變量不可被重復(fù)定義和賦值和用法回調(diào)函數(shù)當(dāng)需要讀取當(dāng)前屬性值是執(zhí)行，根據(jù)相關(guān)數(shù)據(jù)計(jì)算并返回當(dāng)前 1.computed 1.1 定義是一個計(jì)算屬性,類似于過濾器,對綁定到view的數(shù)據(jù)進(jìn)行處理 1.2 get用法 data: { ...

CoderDock 2019-08-22 13:58 評論0 收藏0
vue學(xué)習(xí)筆記4

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

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