vue如何解決代碼需要在dom渲染之后執(zhí)行問(wèn)題
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的值
- 為什么不能寫到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)操作。
推薦使用：
子組件中直接使用父組件傳的值，如需類型轉(zhuǎn)換或者簡(jiǎn)單判斷，直接通過(guò)三目運(yùn)算符判斷使用，就省去了對(duì)父組件傳值的監(jiān)聽(tīng)步驟。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在?Web?應(yīng)用程序中,有時(shí)需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個(gè)全屏功能的工具類,希望對(duì)大家有所幫助2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue?Echarts實(shí)現(xiàn)儀表盤案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
最近做時(shí)速云項(xiàng)目部署,需要將前端項(xiàng)目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟,需要的朋友可以參考下2023-10-10
elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問(wèn)題
這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
最近遇到這樣的需求點(diǎn)擊某一個(gè)節(jié)點(diǎn)，彈窗，直接定位到點(diǎn)擊的節(jié)點(diǎn)，高亮并顯示數(shù)據(jù)，下面小編給大家?guī)?lái)了vue table直接定位到指定元素的操作代碼,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue中qs插件的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
hooks可以通過(guò)特定的函數(shù)將邏輯 "鉤入" 組件中,使得開(kāi)發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護(hù)性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實(shí)際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下2023-09-09
element組件中自定義組件的樣式不生效問(wèn)題(vue scoped scss無(wú)效)
這篇文章主要介紹了解決element組件中自定義組件的樣式不生效問(wèn)題(vue scoped scss無(wú)效)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue?el-pagination分頁(yè)查詢封裝的示例代碼
本文主要介紹了vue?el-pagination分頁(yè)查詢封裝的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06