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

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

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

computed

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


  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í)才會(huì)重新求值。（不接受新的參數(shù)，只是基于data里面的數(shù)據(jù)進(jìn)行計(jì)算）
方法是只要其他數(shù)據(jù)發(fā)生變化，觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)，性能開(kāi)銷比較大。（可以接受參數(shù)）

watch

場(chǎng)景：監(jiān)聽(tīng)到數(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ù)變化，性能開(kāi)銷比較大；可以監(jiān)聽(tīng)"e.a"這個(gè)屬性進(jìn)行監(jiān)聽(tīng)
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 該回調(diào)將會(huì)在偵聽(tīng)開(kāi)始之后被立即調(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開(kāi)發(fā)入門筆記 webrtc和vue

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/96475.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

番茄西紅柿 2019-04-23 11:45 評(píng)論0 收藏0