vue中的watch的用法

2021-10-05 08:55:24 字數 1376 閱讀 4532

在vue中,使用watch來響應資料的變化。

"question"

>

data:

, watch:

},

直接寫乙個監聽處理函式,當每次監聽到 question值發生改變時,執行函式。也可以在所監聽的資料後面直接加字串形式的方法名:

watch:

}

immediate和handler

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

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

props:},

watch:

, immediate:

true}}

,

監聽的資料要寫成物件的形式,包含handler方法和immediate,上面的函式就是就是這個handler方法

immediate標識在watch中首次繫結的時候,是否執行handler,當為true則表示在watch中宣告的時候,就立即執行handler方法,值為false,則表示和一般的使用watch一樣,在資料變化的時候才執行handler。

deep

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

props:},

watch:

, deep:

true

, immediate:

true}}

,

比如:

data:},

watch:

, deep:

true

, immediate:

true

}}

設定deep: true 則可以監聽到personname.name的變化,此時會給personname的所有屬性都加上這個***,當物件屬性較多時,每個屬性值的變化都會執行handler。如果只需要監聽物件中的乙個屬性值,則可以做以下優化:使用字串的形式監聽物件屬性:

watch:

, deep:

true

, immediate:

true

}}

vue中watch的用法

在平時工作中經常會遇到需要對某些資料進行監聽,根據資料的變化來執行某些操作,這個時候我們可以用到vue中的 watch,下面我們一起來看一下watch的具體用法 new vue watch newname和oldname分別對應name的新值和舊值,在函式中,可以對新舊值進行判斷來執行指定操作 使用...

vue 中 watch 的用法

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

Vue中watch 的用法

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