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-cli3.0項(xiàng)目打包后如何修改訪問后端地址
這篇文章主要介紹了vue-cli3.0項(xiàng)目打包后如何修改訪問后端地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue雙向數(shù)據(jù)綁定的原理，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts動(dòng)態(tài)渲染數(shù)據(jù)的相關(guān)資料,echarts是一款基于JavaScript的開源可視化圖表庫,它通過簡單的配置即可實(shí)現(xiàn)各種各樣的可視化效果,需要的朋友可以參考下2023-11-11
基于Vue2x實(shí)現(xiàn)響應(yīng)式自適應(yīng)輪播組件插件VueSliderShow功能
本文講述的是從開發(fā)一款基于Vue2x的響應(yīng)式自適應(yīng)輪播組件插件的一個(gè)全過程，包含發(fā)布到npm，構(gòu)建自己的npm包，供下載安裝使用的技巧,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
Vue 應(yīng)用在首屏加載時(shí)速度過慢,通常與以下問題有關(guān)：打包文件過大、網(wǎng)絡(luò)請(qǐng)求過多、資源加載過慢,針對(duì)這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
組件之間通信分為三種：父-子；子-父；跨級(jí)組件通信。下面，就組件間如何通信做一些總結(jié)。需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細(xì)介紹了vue iview實(shí)現(xiàn)分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
本篇文章主要介紹了詳解VUE2.X過濾器的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
vue項(xiàng)目如何實(shí)現(xiàn)ip和localhost同時(shí)訪問
這篇文章主要介紹了vue項(xiàng)目如何實(shí)現(xiàn)ip和localhost同時(shí)訪問，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章介紹了Vue.js中v-on指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03