watch里面的deep和immediate作用及說明
更新時(shí)間：2024年08月07日 10:24:24 作者：扛把子小雪
這篇文章主要介紹了watch里面的deep和immediate作用及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
watch里面的deep和immediate作用
先看下問題
faterVisible:這個(gè)是父組件中傳值到子組件中的監(jiān)聽父組件的打開狀態(tài)的值
首次父組件打開時(shí)，沒有加immediate時(shí)，不會(huì)走對(duì)應(yīng)的方法，第二次打開時(shí)才會(huì)執(zhí)行
于是，我加了immediate。。。這樣問題就解決了呢
watch屬性deep和immediate區(qū)別
deep：默認(rèn)值是 false，代表是否深度監(jiān)聽。immediate：true代表如果在 wacth 里聲明了之后，就會(huì)立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣，不會(huì)在綁定的時(shí)候就執(zhí)行。
watch中的immediate、handler和deep屬性
immediate屬性
使用watch時(shí)有一個(gè)特點(diǎn)，就是當(dāng)值第一次綁定時(shí)，不會(huì)執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變時(shí)才會(huì)執(zhí)行。
如果我們需要在最初綁定值的時(shí)候也執(zhí)行函數(shù)，則就需要用到immediate屬性。
handler屬性
watch中需要具體執(zhí)行的方法
deep屬性
data（） {
return {
obj: {
'name': "超級(jí)無敵暴龍戰(zhàn)士",
'age': 999
},
}
},
watch: {
obj: {
// 執(zhí)行方法
handler(oldValue,newVal) {
console.log(oldValue)
console.log(newValue)
},
deep: true, // 深度監(jiān)聽
immediate: true // 第一次改變就執(zhí)行
}
// 如果只需要監(jiān)聽對(duì)象中的一個(gè)屬性值，則可以做以下優(yōu)化：使用字符串的形式監(jiān)聽對(duì)象屬性：
'obj.name': {
// 執(zhí)行方法
handler(oldValue,newVal) {
console.log(oldValue)
console.log(newValue)
},
deep: true, // 深度監(jiān)聽
immediate: true // 第一次改變就執(zhí)行
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)
這篇文章主要介紹了vue-loader中引入模板預(yù)處理器的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了Vue中.prettierrc文件的常見配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式
這篇文章主要介紹了vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了Vue3中的計(jì)算屬性和屬性監(jiān)聽的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
件間傳參是vue開發(fā)過程中一個(gè)很常見的應(yīng)用,對(duì)于我們后端開發(fā)來說,每次看到這種組件傳參的代碼就一頭霧水,下面這篇文章主要給大家介紹了關(guān)于VUE3傳值相關(guān)的6種方法,需要的朋友可以參考下2023-04-04
Vue路由(router-link)之高亮、動(dòng)態(tài)傳參詳解
文章介紹了如何使用Vue Router進(jìn)行聲明式導(dǎo)航,并詳細(xì)講解了如何通過`router-link`組件實(shí)現(xiàn)導(dǎo)航高亮、自定義高亮類名、查詢參數(shù)傳參和動(dòng)態(tài)路由傳參,此外,還提到了動(dòng)態(tài)路由參數(shù)的可選符2025-11-11
vue前端獲取不同客戶端mac地址最詳細(xì)步驟(避免踩坑)
在開發(fā)過程中,綁定賬號(hào)和電腦的功能可以通過獲取電腦的MAC地址實(shí)現(xiàn),下面這篇文章主要介紹了vue前端獲取不同客戶端mac地址的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯(cuò)誤的解決
這篇文章主要介紹了vue使用iview的modal彈窗嵌套modal出現(xiàn)格式錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue Element前端應(yīng)用開發(fā)之表格列表展示
在我們一般開發(fā)的系統(tǒng)界面里面，列表頁(yè)面是一個(gè)非常重要的綜合展示界面，包括有條件查詢、列表展示和分頁(yè)處理，以及對(duì)每項(xiàng)列表內(nèi)容可能進(jìn)行的轉(zhuǎn)義處理，本篇隨筆介紹基于Vue +Element基礎(chǔ)上實(shí)現(xiàn)表格列表頁(yè)面的查詢，列表展示和字段轉(zhuǎn)義處理。2021-05-05
vue的簡(jiǎn)介及@vue/cli?腳手架的使用示例
vue 是一個(gè) 漸進(jìn)式的javascript框架，腳手架是一個(gè)通用概念，幫助搭建項(xiàng)目的工具，本文以vue2為例結(jié)合實(shí)例代碼給大家詳細(xì)講解，感興趣的朋友跟隨小編一起看看吧2022-12-12