vue中偵聽器和計算屬性的使用

2021-09-21 14:54:00 字數 877 閱讀 6204

在vue中有一些操作總是在某乙個值得改變後進行相應的操作,這就需要進行動態的追蹤該值得改變,並且進行相應的操作,這種情況下就需要使用偵聽器watch

普通用法

如果需要追蹤的值知識簡單的基礎型別的改變,只需要使用watch的普通用法即可進行動態的監聽屬性的變化。

watch:

}

深度偵聽

當對於物件或者陣列等複雜型別的監聽時需要進行多層遍歷進而判斷是否變化,此時就需要使用watch的深度監聽。

watch:

, deep:

true

// 深度偵聽

}}

當我們想在該變數宣告後就進行觸發一次,需要使用immediate屬性。

watch:

, immediate:

true

// value宣告後就觸發

}}

簡單運算

當模板中的表示式過於冗長的時候就需要考慮使用計算屬性進行計算操作,以減少模板中表示式的長度,計算屬性會動態的計算屬性的值,對於計算屬性計算的值需要返回乙個值,不可以進行data中值得賦值操作。

computed:

else

}}

動態偵聽

由於計算屬性會動態計算相關值得操作,如上段**中就是在flag變化的時候會動態的計算一遍然後將新的值賦值給value,所以有時候可以使用computed對於某一變數的動態計算和賦值。

Vue計算屬性和偵聽器

模板內的表示式非常便利,但是在模板中放入太多的邏輯會讓模板過重切難以維護。對於任何複雜邏輯都應該使用計算屬性。var vm new vue computed 這裡宣告乙個計算屬性reversemsg。我們提供的函式將作用屬性vm.reversemsg的getter函式。我們可以在表示式中呼叫方法來達...

vue中的計算屬性和偵聽器

模板中放入太多的邏輯的時候難以維護。對於複雜的邏輯都可以使用計算屬性。計算屬性中有乙個快取,即使重新渲染,只要資料不發生變化,就不會觸發對應屬性的計算邏輯。watch是觀察某乙個屬性的變化,重新計算屬性值。computed是通過所依賴的屬性的變化重新計算屬性值。大部分情況下watch和compute...

Vue 計算屬性,偵聽器的使用

偵聽器是用來檢測資料變化從而新增自己自定義邏輯的 這一點和計算屬性很相似,計算屬性一般作用於簡單的一些小邏輯 如果邏輯比較複雜可以使用偵聽器,注意的是偵聽器效能方面比不上計算屬性。watch偵聽器執行結果 改變偵聽器值 對於任何複雜邏輯,你都應當使用計算屬性。在乙個計算屬性裡可以完成各種複雜的邏輯,...