資訊專欄INFORMATION COLUMN
摘要：我們可以改寫這個例子計算屬性的指向實例我們可以將同一函數定義為一個方法而不是一個計算屬性。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。這就意味著只要還沒有發生改變，多次訪問計算屬性會立即返回之前的計算結果，而不必再次執行函數。
對于很多初學vue的初級前端開發工程而言，在了解了vue雙向數據綁定v-model、模板語法、實例創建等基礎的知識之后，對于一些復雜的數據操作還無從下手。
首先，什么是計算屬性？
在vue官方文檔中，對計算屬性的初衷是由于模板內部的表達式雖然已經很便利，但是它只能進行簡單的運算，而且面對復雜邏輯的時候，模板過重并且難以維護，所以官方給的建議是對于任何復雜的邏輯都應當使用計算屬性。
那么，我們為什么要使用計算屬性呢？它到底有什么好處，可以給我們帶來哪些便利呢？
我們一起來看下以下代碼
{{ message.split("").reverse().join("") }}var vm = new Vue({ el: "#example", data: { message: "Hello" } })
對于初學著來說，如果要拆分對message進行處理或者其他的復雜操作，我們可能會想到上面這種形式去處理，但是如果說，要實行for循環呢？
有人會說，我可以在`methods: {
reversedMessage: function () {
return this.message.split("").reverse().join("")
}
}`
這樣寫，
但是，如果我需要這個message動態的去改變呢？
為了適應復雜的業務邏輯，計算屬性cumputed就橫空出世了，雖然cumputed和methods可以完成同樣的事情，但是copmputed是基于依賴進行緩存的，然而methods需要每一次的去進行計算。
我們可以改寫這個例子
var app = new Vue({ el: "#app", data: { message: "Hello" }, computed: { // 計算屬性的 getter reversedMessage: function () { // `this` 指向 app 實例 return this.message.split("").reverse().join("") } } }){{ reversedMessage}}"
我們可以將同一函數定義為一個方法而不是一個計算屬性。兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。此時你可以動態的去修改message的值，可以動態的看到reversedMessage再動態的更新。
其次：計算屬性是沒有setter的，默認的情況下只有getter
不過你可以添加一個setter進去。
例子：
{{ allName }}// 用computed實現 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] } } } })
現在運行vm.allName時，setter也會執行，vm.her和vm.she也會被更新
Watch
雖然計算屬性很強大，但是面對復雜的業務需求和奇特的產品經理（雖然很多時候你都想狠狠地胖揍他一頓）的時候，我們也需要一個自定義的偵聽器去檢測數據的動態變化，當數據進行異步或者數據的開銷比較龐大的時候，這個時候watch就顯得比較有用了
`
點擊次數:{{num}}
var vm = new Vue({
el: "#app",
data: {
num: 10
},
watch: {
// 監聽數據的變化做出對應的改變，并不會生成新的屬性
num (val) {
if (val< 5) this.alert()
}
},
methods: {
alert () {
alert("點擊次數達到"+this.number+"次啦")
},
add () {
this.number -= 1
}
}
})`
當你點擊的時候執行add方法，改變num的值，而watch正在監聽num的變化，此時當num<5時,即刻執行alert方法，點擊次數到達了4次啦。
在我們需要依賴動態的去改變data的值之后進行邏輯其他邏輯操作的時候以及我們需要監聽數據結構層次比較高的時候可以使用deep屬性進行深度監聽。
好了，喜歡的朋友請關注下方公眾號，每天不定期更新更多前沿前端技術內容。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114763.html
摘要：我們可以改寫這個例子計算屬性的指向實例我們可以將同一函數定義為一個方法而不是一個計算屬性。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。這就意味著只要還沒有發生改變，多次訪問計算屬性會立即返回之前的計算結果，而不必再次執行函數。 對于很多初學vue的初級前端開發工程而言，在了解了vue雙向數據綁定v-model、模板語法、實例創建等基礎的知識之后，對于一些復雜的數據操作還無從...
摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。當某個屬性發生變化，觸發攔截函數，然后調用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數組，并逐個調用的方法，完成響應更新。 雖然目前的技術棧已由Vue轉到了React，但從之前使用Vue開發的多個項目實際經歷來看還是非常愉悅的，Vue文檔清晰規范，api設計簡潔高效，對前端開發人員友好，上手快，甚至個人認為在很多...
摘要：當某個屬性發生變化，觸發攔截函數，然后調用自身消息訂閱器的方法，遍歷當前中保存著所有訂閱者的數組，并逐個調用的方法，完成響應更新。 編者按：我們會不時邀請工程師談談有意思的技術細節，希望知其所以然能讓大家在面試有更出色表現。也給面試官提供更多思路。 showImg(https://segmentfault.com/img/bVbgYyU?w=1200&h=600); 雖然目前的技術...
閱讀 2225·2021-09-22 15:25
閱讀 3609·2019-08-30 12:48
閱讀 2197·2019-08-30 11:25
閱讀 2332·2019-08-30 11:05
閱讀 720·2019-08-29 17:28
閱讀 3278·2019-08-26 12:16
閱讀 2601·2019-08-26 11:31
閱讀 1681·2019-08-23 17:08
