Vue之計算屬性 方法 偵聽

2021-10-02 22:28:52 字數 717 閱讀 4464

三種方法進行資料的計算:

1、計算屬性(推薦)

computed屬性下去計算值

優點:可以設定快取,會自動監聽涉及的變數值是否改變,如果涉及的變數值沒有改變,則不會重新執行(age改變,computed下的fullname不會重新執行)

2、計算方法

寫在methods方法下

缺點:不會設定快取,無論涉及的值是否改變,只要頁面重新整理都會重新執行(age改變,methods下的fullname也會重新執行)

3、偵聽方式

寫在watch下(age改變,watch下的fullname不會重新執行)

優點:會設定快取,如果監聽的變數值沒有改變,則不會執行

缺點:跟計算屬性相比,**會顯得冗餘

>

}<

/div>

newvue(,

// 3、偵聽

watch:

, lastname:

function()

}///2、方法,html中寫為fullname()

// methods:

// }

// 1、屬性

// computed:

// }})

<

/script>

vue 學習之計算屬性 方法 偵聽屬性

計算屬性 computed 方法 methods 偵聽屬性 watch 1.計算屬性 computed 模板變內的表示式過於複雜時,難以維護,這時便可以使用計算屬性 例如 模板中放入過長或邏輯複雜的表示式時,後期維護會比較複雜 可以轉化為 在計算屬性中 computed 2.方法 methods 同...

vue之計算屬性和偵聽器

一 使用計算屬性 模板內的表示式是非常便利的,但適用於簡單運算。在模板中放入太多的邏輯會讓模板過重且難以維護。script src vue.js script div id p p div script varvm new vue script 在上述中字串的反轉邏輯放在模板中,這樣是不利於維護的,...

vue之計算屬性

在vue元件的模板中有很多需要通過計算來表達的地方使用計算屬性十分方便,比如在外賣評價中常見的是一星到五星,這時候我們需要通過計算資料庫傳來的評分來判定這家店屬於幾星的範疇。計算屬性官網分為computed和methods兩種,其中computed有使用之前快取計算結果的功能只有相關依賴發生變化它才...