vue提供了watch來監聽雙向繫結過程中data的變化。$watch()
監聽某個值(雙向繫結)的變化,一旦發生變化,就呼叫引號裡的方法,從而達到change事件監聽的效果!!
如果只是監聽obj
內的乙個屬性變化,可以直接使用obj.key
進行監聽。
watch:
}
如果對整個obj
深層監聽,就會用到deep
:
watch:
, deep:
true
, immediate:
true
}}
我們知道使用watch
時有乙個特點,就是當值第一次繫結的時候,不會執行監聽函式,只有值發生改變才會執行。如果我們需要在最初繫結值的時候也執行函式,則就需要用到immediate
屬性。
這裡immediate
的作用是:當值第一次進行繫結的時候並不會觸發watch監聽,使用immediate
則可以在最初繫結的時候執行。
另外,vue2.0
中deep
,預設值是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。來實現監聽到物件屬性的...