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

2021-09-21 17:36:18 字數 739 閱讀 8922

計算屬性(computed) 方法(methods) 偵聽屬性(watch)

1. 計算屬性 (computed)

模板變內的表示式過於複雜時,難以維護,這時便可以使用計算屬性

例如:} //模板中放入過長或邏輯複雜的表示式時,後期維護會比較複雜

可以轉化為}

在計算屬性中

computed:

2. 方法(methods)

同上的邏輯,可以把計算屬性中的cutstring()方法寫在 methods(){}裡面

二者的區別為:計算屬性依賴為this.name的資料進行快取,只有當this.name的值發生改變時,才會重新計算

方法 是每次訪問cutstring() 都會重新計算

可根據實際應用需求是否需要快取資料來區分使用計算屬性還是方法。

3. 偵聽屬性(watch)

用於觀察和響應 vue 例項上的資料變化

當資料變化時需要進行非同步操作或者開銷比較大的操作時,可以用偵聽屬性。

注:一般的資料變化進行的操作可以用計算屬性來計算

例如:watch:}  // 過濾器預設第乙個引數是 | 前的變數,custring(data1,data2)中,可以繼續傳參,作為第二個第三個

filter:{

custring:function(name){

return name && length &&  name.length>6 ? name.substr(0,6)+'...' :name;

Vue之計算屬性 方法 偵聽

三種方法進行資料的計算 1 計算屬性 推薦 computed屬性下去計算值 優點 可以設定快取,會自動監聽涉及的變數值是否改變,如果涉及的變數值沒有改變,則不會重新執行 age改變,computed下的fullname不會重新執行 2 計算方法 寫在methods方法下 缺點 不會設定快取,無論涉及...

vue之計算屬性和偵聽器

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

vue之計算屬性

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