vue 核心之一計算屬性computed 和偵聽屬性watch

羅志環(huán) 發(fā)布于2019-08-30 11:05 / 2340人閱讀

摘要：我們可以改寫這個例子計算屬性的指向?qū)嵗覀兛梢詫⑼缓瘮?shù)定義為一個方法而不是一個計算屬性。然而，不同的是計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。這就意味著只要還沒有發(fā)生改變，多次訪問計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。

對于很多初學(xué)vue的初級前端開發(fā)工程而言，在了解了vue雙向數(shù)據(jù)綁定v-model、模板語法、實例創(chuàng)建等基礎(chǔ)的知識之后，對于一些復(fù)雜的數(shù)據(jù)操作還無從下手。

首先，什么是計算屬性？

在vue官方文檔中，對計算屬性的初衷是由于模板內(nèi)部的表達(dá)式雖然已經(jīng)很便利，但是它只能進(jìn)行簡單的運算，而且面對復(fù)雜邏輯的時候，模板過重并且難以維護(hù)，所以官方給的建議是對于任何復(fù)雜的邏輯都應(yīng)當(dāng)使用計算屬性。

那么，我們?yōu)槭裁匆褂糜嬎銓傩阅?？它到底有什么好處，可以給我們帶來哪些便利呢？
我們一起來看下以下代碼


  {{ message.split("").reverse().join("") }}

var vm = new Vue({
  el: "#example",
  data: {
    message: "Hello"
  }
})

對于初學(xué)著來說，如果要拆分對message進(jìn)行處理或者其他的復(fù)雜操作，我們可能會想到上面這種形式去處理，但是如果說，要實行for循環(huán)呢？

有人會說，我可以在`methods: {
reversedMessage: function () {

return this.message.split("").reverse().join("")

}
}`
這樣寫，
但是，如果我需要這個message動態(tài)的去改變呢？
為了適應(yīng)復(fù)雜的業(yè)務(wù)邏輯，計算屬性cumputed就橫空出世了，雖然cumputed和methods可以完成同樣的事情，但是copmputed是基于依賴進(jìn)行緩存的，然而methods需要每一次的去進(jìn)行計算。
我們可以改寫這個例子


  {{ reversedMessage}}"

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

我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性。兩種方式的最終結(jié)果確實是完全相同的。然而，不同的是計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。這就意味著只要 message 還沒有發(fā)生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結(jié)果，而不必再次執(zhí)行函數(shù)。此時你可以動態(tài)的去修改message的值，可以動態(tài)的看到reversedMessage再動態(tài)的更新。

其次：計算屬性是沒有setter的，默認(rèn)的情況下只有g(shù)etter

不過你可以添加一個setter進(jìn)去。
例子：

{{ allName }}
// 用computed實現(xiàn)
var vm = new Vue({
  el: "#app",
  data: {
    her: "尼古拉斯趙四",
    he: "劉英"
  },
  computed: {
    allName: function () {
        get: function () {
          return this.her+ " 的女兒是" + this.lastName
        },
         // setter
        set: function (newValue) {
          var names = newValue.split(" ")
          this.her= names[0]
          this.he= names[names.length - 1]
        }
    }
  }
})

現(xiàn)在運行vm.allName時，setter也會執(zhí)行，vm.her和vm.she也會被更新

Watch

雖然計算屬性很強大，但是面對復(fù)雜的業(yè)務(wù)需求和奇特的產(chǎn)品經(jīng)理（雖然很多時候你都想狠狠地胖揍他一頓）的時候，我們也需要一個自定義的偵聽器去檢測數(shù)據(jù)的動態(tài)變化，當(dāng)數(shù)據(jù)進(jìn)行異步或者數(shù)據(jù)的開銷比較龐大的時候，這個時候watch就顯得比較有用了
`

點擊次數(shù):{{num}}

var vm = new Vue({
el: "#app",
data: {

num: 10

},
watch: {

// 監(jiān)聽數(shù)據(jù)的變化做出對應(yīng)的改變，并不會生成新的屬性
num (val) {
    if (val< 5) this.alert()
}

},
methods: {

alert () {
  alert("點擊次數(shù)達(dá)到"+this.number+"次啦")
},
add () {
  this.number -= 1
}

}
})`

當(dāng)你點擊的時候執(zhí)行add方法，改變num的值，而watch正在監(jiān)聽num的變化，此時當(dāng)num<5時,即刻執(zhí)行alert方法，點擊次數(shù)到達(dá)了4次啦。
在我們需要依賴動態(tài)的去改變data的值之后進(jìn)行邏輯其他邏輯操作的時候以及我們需要監(jiān)聽數(shù)據(jù)結(jié)構(gòu)層次比較高的時候可以使用deep屬性進(jìn)行深度監(jiān)聽。

好了，喜歡的朋友請關(guān)注下方公眾號，每天不定期更新更多前沿前端技術(shù)內(nèi)容。

GPU云服務(wù)器云服務(wù)器 vue的計算屬性 vue實例屬性 vue.js 屬性計算屬性

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

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

發(fā)表評論

登陸后可評論

0條評論

羅志環(huán)

男|高級講師

我要關(guān)注我要私信

TA的文章

云虛擬主機如何清除數(shù)據(jù)-如何清理虛擬主機的垃圾文件？

閱讀 2239·2021-09-22 15:25
怎樣打造一個DOM元素位置引擎 (一)

閱讀 3619·2019-08-30 12:48
position定位有哪些？各有什么特點？

閱讀 2209·2019-08-30 11:25
vue 核心之一計算屬性computed 和偵聽屬性watch

閱讀 2341·2019-08-30 11:05
圖片自適應(yīng)

閱讀 728·2019-08-29 17:28
React 學(xué)習(xí)之路（四） state & 生命周期

閱讀 3291·2019-08-26 12:16
promise 基礎(chǔ)版（雛形）

閱讀 2614·2019-08-26 11:31
一名【合格】前端工程師的自檢清單

閱讀 1712·2019-08-23 17:08

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue 核心之一計算屬性computed 和偵聽屬性watch

{{ reversedMessage}}"

相關(guān)文章