vue監聽watch的過程

2021-09-29 00:14:15 字數 1683 閱讀 3280

vue提供了watch來監聽雙向繫結過程中data的變化。$watch()監聽某個值(雙向繫結)的變化,一旦發生變化,就呼叫引號裡的方法,從而達到change事件監聽的效果!!

如果只是監聽obj內的乙個屬性變化,可以直接使用obj.key進行監聽。

watch:

}

如果對整個obj深層監聽,就會用到deep

watch:

, deep:

true

, immediate:

true

}}

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

這裡immediate的作用是:當值第一次進行繫結的時候並不會觸發watch監聽,使用immediate則可以在最初繫結的時候執行。

另外,vue2.0deep,預設值是false,代表是否深度監聽。immediate:true代表如果在wacth裡宣告了之後,就會立即先去執行裡面的handler方法,如果為false就跟我們以前的效果一樣,不會在繫結的時候就執行。

vue2.0官方文件,官方文件真的很重要哇,以前都不怎麼注意看,現在發現看看官方文件比看部落格帖子什麼的高效多了。

貼一波官網的**:

"watch-example"

>

ask a yes/no question:

"question"

>

<

/p>

}<

/p>

<

/div>

<

!-- 因為 ajax 庫和通用工具的生態已經相當豐富,vue 核心**沒有重複 --

>

<

!-- 提供這些功能以保持精簡。這也可以讓你自由選擇自己更熟悉的工具。 --

>

"">

<

/script>

"">

<

/script>

var watchexamplevm =

newvue(,

watch:},

created:

function()

, methods:

this

.answer =

'thinking...'

var vm =

this

axios.

get(

'').

then

(function

(response)).

catch

(function

(error))}

}})<

/script>

vue的watch監聽函式

在vue中,使用watch來響應資料的變化。watch的用法大致有三種。下面 是watch的一種簡單的用法 1.new vue methods watch 也可以直接寫乙個監聽處理函式,當每次監聽到 cityname 值發生改變時,執行函式。也可以在所監聽的資料後面直接加字串形式的方法名 watch...

vue中watch監聽屬性詳解

使用方法 watch 2 通過watch監聽docdata資料的變化,資料發生變化時,this.change number 使用深度監聽 watch deep true 通過watch監聽data資料的變化,資料發生變化時,執行changedata方法 watch methods 2 詳解watch...

vue 使用watch監聽注意點

1.1 watch 監聽不到 obejct物件的變化 在專案中,當我們需要監聽乙個物件的改變時,普通的watch方法無法監聽到物件內部屬性的改變,只有data中的資料才能夠監聽到變化,此時就需要deep屬性對物件進行深度監聽。解決方法 此時可以設定監聽物件的deep ture。來實現監聽到物件屬性的...