vue中watch的用法

2021-10-17 20:37:42 字數 967 閱讀 7500

在平時工作中經常會遇到需要對某些資料進行監聽,根據資料的變化來執行某些操作,這個時候我們可以用到vue中的***watch,下面我們一起來看一下watch的具體用法

new

vue(

, watch:}}

)

newname和oldname分別對應name的新值和舊值,在函式中,可以對新舊值進行判斷來執行指定操作

使用watch基本用法時有乙個特點,就是當值第一次繫結的時候,不會執行監聽函式,只有值發生改變才會執行。如果我們需要在最初繫結值的時候也執行函式,則就需要用到immediate屬性。

比如當父元件向子元件動態傳值時,子元件props首次獲取到父元件傳來的預設值時,也需要執行函式,此時就需要將immediate設為true。

new

vue(

, watch:

, immediate:

true}}

})

當需要監聽乙個物件的改變時,基本的watch方法無法監聽到物件內部屬性的改變,只有data中的資料才能夠監聽到變化,此時就需要deep屬性對物件進行深度監聽

new

vue(},

watch:

, immediate:

true

, deep:

true}}

})

當物件屬性較多時,每個屬性值的變化都會執行handler。如果只需要監聽物件中的乙個屬性值,則可以做以下優化:使用字串的形式監聽物件屬性:

// an highlighted block

newvue(}

, watch:

, immediate:

true

, deep:

true}}

})

vue 中 watch 的用法

首先確認 watch是乙個物件,一定要當成物件來用。物件就有鍵,有值。鍵 就是你要監控的那個傢伙,比如說 route,這個就是要監控路由的變化。或者是data中的某個變數。值可以是函式 就是當你監控的傢伙變化時,需要執行的函式,這個函式有兩個形參,第乙個是當前值,第二個是變化後的值。值也可以是函式名...

Vue中watch 的用法

fullname firstname 上面的 的效果是,當我們輸入firstname後,wacth監聽每次修改變化的新值,然後計算輸出fullname。這裡 watch 的乙個特點是,最初繫結的時候是不會執行的,要等到firstname改變時才執行監聽計算。那我們想要一開始就讓他最初繫結的時候就執行...

vue中的watch的用法

在vue中,使用watch來響應資料的變化。question data watch 直接寫乙個監聽處理函式,當每次監聽到 question值發生改變時,執行函式。也可以在所監聽的資料後面直接加字串形式的方法名 watch immediate和handler 上面的寫法使用watch有乙個特點,就是當...