vue如何解決代碼需要在dom渲染之后執(zhí)行問題
更新時間：2024年03月06日 15:06:51 作者：快樂的小青蛙。
這篇文章主要介紹了vue如何解決代碼需要在dom渲染之后執(zhí)行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue解決代碼需要在dom渲染之后執(zhí)行
當(dāng)代碼需要延遲到dom從新渲染之后執(zhí)行時使用
- 組件的.$nextTick（回調(diào)函數(shù)）方法，會把回調(diào)推遲到下一個DOM更新周期之后執(zhí)行。通俗的理解是：等組件DOM更新完成之后，在執(zhí)行回調(diào)函數(shù)，從而能保證回調(diào)函數(shù)可以操作到最新的DOM元素
- 執(zhí)行下列代碼會報錯，因?yàn)樵趫?zhí)行上面代碼時候，值變化后沒有馬上進(jìn)行渲染頁面（生命周期函數(shù)beforUpdata）所以拿不到ref的值
- 為什么不能寫到updata中（因?yàn)辄c(diǎn)擊后會執(zhí)行一次獲取焦點(diǎn)，當(dāng)輸入框失去焦點(diǎn)的時候，又要獲取一次焦點(diǎn)，此時輸入框已經(jīng)隱藏） 此處不能使用 this.$refs.iptref.focus();
vue（數(shù)據(jù)改變，DOM不渲染問題）
1、組件內(nèi)部
屬性值地址空間內(nèi)引用地址改變，DOM不能渲染。
問題舉例：
this.items = [[],[],[],[]]
在items 中，修改任意一項數(shù)組中的值，DOM是不會更新的，
解決方案：
this.items = [...this.items]
通過解構(gòu)賦值，重新給items賦值。
2、組件之間傳值
父組件傳data改變，子組件未更新。
子組件中在mounted中對父組件傳的值，進(jìn)行了判斷等相關(guān)處理，通過改變子組件自身定義的狀態(tài)實(shí)現(xiàn)效果。
此時，父組件值更新，子組件不重新渲染，是因?yàn)椋附M件值改變子組件不會走mounted的生命周期。
處理方案：
使用watch監(jiān)聽父組件傳的值，當(dāng)值改變的時候，進(jìn)行對應(yīng)操作。
推薦使用：
子組件中直接使用父組件傳的值，如需類型轉(zhuǎn)換或者簡單判斷，直接通過三目運(yùn)算符判斷使用，就省去了對父組件傳值的監(jiān)聽步驟。
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
一步步教你用Vue.js創(chuàng)建一個組件(附代碼示例)
組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于如何一步步用Vue.js創(chuàng)建一個組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue 全局loading組件,需要的朋友可以參考下2018-05-05
Vue在H5 項目中使用融云進(jìn)行實(shí)時個人單聊通訊
這篇文章主要介紹了Vue在H5 項目中使用融云進(jìn)行實(shí)時個人單聊通訊,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了Vue.js雙向綁定實(shí)現(xiàn)原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
如何修改element-ui中tree組件的icon圖標(biāo)(小白都會的前端技能)
這篇文章主要給大家介紹了關(guān)于如何修改element-ui中tree組件的icon圖標(biāo)的相關(guān)資料,本文介紹的是小白都會的前端技能,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue技術(shù)分享-你可能不知道的7個秘密,需要的朋友可以參考下2018-04-04
Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用，感興趣的朋友一起看看吧2022-03-03
事件總線作為一種全局的組件通信方法,符合訂閱發(fā)布模式,由于其簡單有效的使用方式,受到部分開發(fā)者的歡迎,這篇文章主要介紹了mitt和bus有什么區(qū)別的相關(guān)資料,需要的朋友可以參考下2026-03-03
vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼詳解
這篇文章主要介紹了vue實(shí)現(xiàn)綁定事件的方法實(shí)例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了詳解vue-cli構(gòu)建項目反向代理配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09