vue如何解決代碼需要在dom渲染之后執(zhí)行問題
更新時間：2024年03月06日 15:06:51 作者：快樂的小青蛙。
這篇文章主要介紹了vue如何解決代碼需要在dom渲染之后執(zhí)行問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue解決代碼需要在dom渲染之后執(zhí)行
當代碼需要延遲到dom從新渲染之后執(zhí)行時使用
- 組件的.$nextTick（回調(diào)函數(shù)）方法，會把回調(diào)推遲到下一個DOM更新周期之后執(zhí)行。通俗的理解是：等組件DOM更新完成之后，在執(zhí)行回調(diào)函數(shù)，從而能保證回調(diào)函數(shù)可以操作到最新的DOM元素
- 執(zhí)行下列代碼會報錯，因為在執(zhí)行上面代碼時候，值變化后沒有馬上進行渲染頁面（生命周期函數(shù)beforUpdata）所以拿不到ref的值
- 為什么不能寫到updata中（因為點擊后會執(zhí)行一次獲取焦點，當輸入框失去焦點的時候，又要獲取一次焦點，此時輸入框已經(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中對父組件傳的值，進行了判斷等相關(guān)處理，通過改變子組件自身定義的狀態(tài)實現(xiàn)效果。
此時，父組件值更新，子組件不重新渲染，是因為，父組件值改變子組件不會走mounted的生命周期。
處理方案：
使用watch監(jiān)聽父組件傳的值，當值改變的時候，進行對應(yīng)操作。
推薦使用：
子組件中直接使用父組件傳的值，如需類型轉(zhuǎn)換或者簡單判斷，直接通過三目運算符判斷使用，就省去了對父組件傳值的監(jiān)聽步驟。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在?Web?應(yīng)用程序中,有時需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個全屏功能的工具類,希望對大家有所幫助2024-03-03
這篇文章主要為大家詳細介紹了vue?Echarts實現(xiàn)儀表盤案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
最近做時速云項目部署,需要將前端項目打成鏡像文件,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包成Docker鏡像包的簡單步驟,需要的朋友可以參考下2023-10-10
elementUI動態(tài)表單?+?el-select?按要求禁用問題
這篇文章主要介紹了elementUI動態(tài)表單?+?el-select?按要求禁用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
最近遇到這樣的需求點擊某一個節(jié)點，彈窗，直接定位到點擊的節(jié)點，高亮并顯示數(shù)據(jù)，下面小編給大家?guī)砹藇ue table直接定位到指定元素的操作代碼,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue中qs插件的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
Vue2.0基于vue-cli+webpack父子組件通信(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
hooks可以通過特定的函數(shù)將邏輯 "鉤入" 組件中,使得開發(fā)者能夠更靈活地構(gòu)建和管理組件的功能從而提高代碼的可讀性以及可維護性等,本篇文章將介紹hooks如何在vue3中使用以及它的一些實際使用例子,讓大家能更好的了解和使用hooks,需要的朋友可以參考下2023-09-09
element組件中自定義組件的樣式不生效問題(vue scoped scss無效)
這篇文章主要介紹了解決element組件中自定義組件的樣式不生效問題(vue scoped scss無效)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本文主要介紹了vue?el-pagination分頁查詢封裝的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06