vue中watch的詳細(xì)用法

在vue中惕橙,使用watch來響應(yīng)數(shù)據(jù)的變化带膜。watch的用法大致有三種但指。下面代碼是watch的一種簡(jiǎn)單的用法:

<input?type="text"?v-model="cityName"/>

new?Vue({

??el:?'#root',

??data:?{

????cityName:?'shanghai'

??},

??watch:?{

????cityName(newName,?oldName)?{??????//?...????}

??}?

})

直接寫一個(gè)監(jiān)聽處理函數(shù)仅叫,當(dāng)每次監(jiān)聽到?cityName 值發(fā)生改變時(shí)膏斤,執(zhí)行函數(shù)盅惜。也可以在所監(jiān)聽的數(shù)據(jù)后面直接加字符串形式的方法名:

watch:?{

????cityName:?'nameChange'

????}

?}

immediate和handler

這樣使用watch時(shí)有一個(gè)特點(diǎn)中剩,就是當(dāng)值第一次綁定的時(shí)候,不會(huì)執(zhí)行監(jiān)聽函數(shù)抒寂,只有值發(fā)生改變才會(huì)執(zhí)行结啼。如果我們需要在最初綁定值的時(shí)候也執(zhí)行函數(shù),則就需要用到immediate屬性屈芜。

比如當(dāng)父組件向子組件動(dòng)態(tài)傳值時(shí)郊愧,子組件props首次獲取到父組件傳來的默認(rèn)值時(shí),也需要執(zhí)行函數(shù)井佑,此時(shí)就需要將immediate設(shè)為true属铁。

new?Vue({

??el:?'#root',

??data:?{

????cityName:?''

??},

??watch:?{

????cityName:?{

????  handler(newName,?oldName)?{

??????  //?...????  },

????  immediate:?true

????}

??}?

})

監(jiān)聽的數(shù)據(jù)后面寫成對(duì)象形式,包含handler方法和immediate躬翁,之前我們寫的函數(shù)其實(shí)就是在寫這個(gè)handler方法焦蘑;

immediate表示在watch中首次綁定的時(shí)候,是否執(zhí)行handler盒发,值為true則表示在watch中聲明的時(shí)候例嘱,就立即執(zhí)行handler方法,值為false宁舰,則和一般使用watch一樣蝶防,在數(shù)據(jù)發(fā)生變化的時(shí)候才執(zhí)行handler。

deep

當(dāng)需要監(jiān)聽一個(gè)對(duì)象的改變時(shí)明吩,普通的watch方法無法監(jiān)聽到對(duì)象內(nèi)部屬性的改變,只有data中的數(shù)據(jù)才能夠監(jiān)聽到變化殷费,此時(shí)就需要deep屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽印荔。

<input?type="text"?v-model="cityName.name"/>

new?Vue({

??el:?'#root',

??data:?{

????cityName:?{id:?1,?name:?'shanghai'}

??},

??watch:?{

????cityName:?{

??????handler(newName,?oldName)?{??????//?...????},

????deep:?true,

????immediate:?true

????}

??}?

})

設(shè)置deep: true 則可以監(jiān)聽到cityName.name的變化低葫,此時(shí)會(huì)給cityName的所有屬性都加上這個(gè)監(jiān)聽器,當(dāng)對(duì)象屬性較多時(shí)仍律,每個(gè)屬性值的變化都會(huì)執(zhí)行handler嘿悬。如果只需要監(jiān)聽對(duì)象中的一個(gè)屬性值,則可以做以下優(yōu)化:使用字符串的形式監(jiān)聽對(duì)象屬性:

watch:?{????'cityName.name':?{

??????handler(newName,?oldName)?{??????//?...??????},

??????deep:?true,

??????immediate:?true

????}

??}

這樣只會(huì)給對(duì)象的某個(gè)特定的屬性加監(jiān)聽器水泉。

數(shù)組(一維善涨、多維)的變化不需要通過深度監(jiān)聽,對(duì)象數(shù)組中對(duì)象的屬性變化則需要deep深度監(jiān)聽草则。

作者:慕桂英546537

鏈接:https://www.imooc.com/article/70010

來源:慕課網(wǎng)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末钢拧,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子炕横,更是在濱河造成了極大的恐慌源内,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,284評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件份殿,死亡現(xiàn)場(chǎng)離奇詭異膜钓,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)卿嘲,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門颂斜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拾枣,你說我怎么就攤上這事沃疮。” “怎么了放前?”我有些...
    開封第一講書人閱讀 164,614評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵忿磅,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我凭语,道長(zhǎng)葱她,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,671評(píng)論 1 293
  • 正文 為了忘掉前任似扔,我火速辦了婚禮吨些,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘炒辉。我一直安慰自己豪墅,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6 392
  • 文/花漫 我一把揭開白布黔寇。 她就那樣靜靜地躺著偶器,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屏轰,一...
    開封第一講書人閱讀 51,562評(píng)論 1 305
  • 那天颊郎,我揣著相機(jī)與錄音,去河邊找鬼霎苗。 笑死姆吭,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的唁盏。 我是一名探鬼主播内狸,決...
    沈念sama閱讀 40,309評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼厘擂!你這毒婦竟也來了昆淡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,223評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤驴党,失蹤者是張志新(化名)和其女友劉穎瘪撇,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體港庄,經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡倔既,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鹏氧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片渤涌。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖把还,靈堂內(nèi)的尸體忽然破棺而出实蓬,到底是詐尸還是另有隱情,我是刑警寧澤吊履,帶...
    沈念sama閱讀 35,705評(píng)論 5 347
  • 正文 年R本政府宣布安皱,位于F島的核電站,受9級(jí)特大地震影響艇炎,放射性物質(zhì)發(fā)生泄漏酌伊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3 330
  • 文/蒙蒙 一缀踪、第九天 我趴在偏房一處隱蔽的房頂上張望居砖。 院中可真熱鬧,春花似錦驴娃、人聲如沸奏候。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蔗草。三九已至咒彤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蕉世,已是汗流浹背蔼紧。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狠轻,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3 370
  • 正文 我出身青樓彬犯,卻偏偏與公主長(zhǎng)得像向楼,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子谐区,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容