vue解決代碼需要在dom渲染之后執(zhí)行

當(dāng)代碼需要延遲到dom從新渲染之后執(zhí)行時(shí)使用

• 組件的.$nextTick（回調(diào)函數(shù)）方法，會(huì)把回調(diào)推遲到下一個(gè)DOM更新周期之后執(zhí)行。通俗的理解是：等組件DOM更新完成之后，在執(zhí)行回調(diào)函數(shù)，從而能保證回調(diào)函數(shù)可以操作到最新的DOM元素
• 執(zhí)行下列代碼會(huì)報(bào)錯(cuò)，因?yàn)樵趫?zhí)行上面代碼時(shí)候，值變化后沒(méi)有馬上進(jìn)行渲染頁(yè)面（生命周期函數(shù)beforUpdata）所以拿不到ref的值
• 為什么不能寫(xiě)到updata中（因?yàn)辄c(diǎn)擊后會(huì)執(zhí)行一次獲取焦點(diǎn)，當(dāng)輸入框失去焦點(diǎn)的時(shí)候，又要獲取一次焦點(diǎn)，此時(shí)輸入框已經(jīng)隱藏） 此處不能使用 this.$refs.iptref.focus();

vue（數(shù)據(jù)改變，DOM不渲染問(wèn)題）

1、組件內(nèi)部

屬性值地址空間內(nèi)引用地址改變，DOM不能渲染。

問(wèn)題舉例：

this.items = [[],[],[],[]]

在items 中，修改任意一項(xiàng)數(shù)組中的值，DOM是不會(huì)更新的，

解決方案：

this.items = [...this.items]

通過(guò)解構(gòu)賦值，重新給items賦值。

2、組件之間傳值

父組件傳data改變，子組件未更新。

子組件中在mounted中對(duì)父組件傳的值，進(jìn)行了判斷等相關(guān)處理，通過(guò)改變子組件自身定義的狀態(tài)實(shí)現(xiàn)效果。    

此時(shí)，父組件值更新，子組件不重新渲染，是因?yàn)?，父組件值改變子組件不會(huì)走mounted的生命周期。

處理方案：

使用watch監(jiān)聽(tīng)父組件傳的值，當(dāng)值改變的時(shí)候，進(jìn)行對(duì)應(yīng)操作。

推薦使用： 

子組件中直接使用父組件傳的值，如需類(lèi)型轉(zhuǎn)換或者簡(jiǎn)單判斷，直接通過(guò)三目運(yùn)算符判斷使用，就省去了對(duì)父組件傳值的監(jiān)聽(tīng)步驟。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論