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

資訊專欄INFORMATION COLUMN

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

Galence / 683人閱讀

摘要：我們可以改寫這個例子計算屬性的指向實例我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。這就意味著只要還沒有發(fā)生改變，多次訪問計算屬性會立即返回之前的計算結果，而不必再次執(zhí)行函數(shù)。

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

首先，什么是計算屬性？

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

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


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


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

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

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

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

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


  
{{ reversedMessage}}"



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

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

其次：計算屬性是沒有setter的，默認的情況下只有getter

不過你可以添加一個setter進去。
例子：

{{ 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

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



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


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

num: 10

},
watch: {

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

},
methods: {

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

}
})`

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

好了，喜歡的朋友請關注下方公眾號，每天不定期更新更多前沿前端技術內容。

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

轉載請注明本文地址：http://systransis.cn/yun/104407.html

相關文章

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

    摘要：我們可以改寫這個例子計算屬性的指向實例我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。這就意味著只要還沒有發(fā)生改變，多次訪問計算屬性會立即返回之前的計算結果，而不必再次執(zhí)行函數(shù)。 對于很多初學vue的初級前端開發(fā)工程而言，在了解了vue雙向數(shù)據(jù)綁定v-model、模板語法、實例創(chuàng)建等基礎的知識之后，對于一些復雜的數(shù)據(jù)操作還無從...

    羅志環(huán) 評論0 收藏0

  • 淺談Vue中計算屬性computed的實現(xiàn)原理

    摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器。當某個屬性發(fā)生變化，觸發(fā)攔截函數(shù)，然后調用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數(shù)組，并逐個調用的方法，完成響應更新。 雖然目前的技術棧已由Vue轉到了React，但從之前使用Vue開發(fā)的多個項目實際經(jīng)歷來看還是非常愉悅的，Vue文檔清晰規(guī)范，api設計簡潔高效，對前端開發(fā)人員友好，上手快，甚至個人認為在很多...

    laznrbfe 評論0 收藏0

  • 做面試的不倒翁：淺談 Vue 中 computed 實現(xiàn)原理

    摘要：當某個屬性發(fā)生變化，觸發(fā)攔截函數(shù)，然后調用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數(shù)組，并逐個調用的方法，完成響應更新。 編者按：我們會不時邀請工程師談談有意思的技術細節(jié)，希望知其所以然能讓大家在面試有更出色表現(xiàn)。也給面試官提供更多思路。 showImg(https://segmentfault.com/img/bVbgYyU?w=1200&h=600); 雖然目前的技術...

    Anonymous1 評論0 收藏0

  • vue面試

    摘要：雖然計算屬性在大多數(shù)情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數(shù)首頁可以控制導航跳轉，，等，一般用于頁面的修改。 談談你對MVVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務邏輯都在Model層中定義；View 代表UI視圖，負責數(shù)據(jù)的展示；...

    vspiders 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<