vue中方法執(zhí)行順序問題及分析
vue方法執(zhí)行順序問題
實際應(yīng)用中，需要獲取json文件中的數(shù)據(jù)渲染nodes
運(yùn)行后發(fā)現(xiàn)console.log(this.nodes)這行代碼先于this.getNodes執(zhí)行。
了解原因VUE中的方法調(diào)用順序是依次進(jìn)行的，方法體內(nèi)部也是依次執(zhí)行的，但是，兩個方法體的執(zhí)行順序并不能嚴(yán)格控制，不一定一個方法執(zhí)行完再執(zhí)行另一個。
即在此表現(xiàn)為this.getNodes已經(jīng)開始執(zhí)行，但還未完全執(zhí)行結(jié)束就開始執(zhí)行console.log(this.nodes)。
為了解決上面問題
讓this.getNodes之心完成之后在執(zhí)行下面的方法，需要引入async，await方法
async
async的用法，它作為一個關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個異步函數(shù)，因為async就是異步的意思， 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會阻塞后面代碼的執(zhí)行，async 函數(shù)返回的是一個promise 對象，可以使用then方法添加回調(diào)函數(shù)。
當(dāng)函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。
await
await的含義為等待。意思就是代碼需要等待await后面的函數(shù)運(yùn)行完并且有了返回結(jié)果之后，才繼續(xù)執(zhí)行下面的代碼。這正是同步的效果。
修改后的代碼，可以實現(xiàn)順序執(zhí)行
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vant-list上拉加載onload事件觸發(fā)多次問題及解決
這篇文章主要介紹了vant-list上拉加載onload事件觸發(fā)多次問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
插槽(slot)作用是讓父組件可以往子組件指定位置插入?html?結(jié)構(gòu),也是組件的一種通信方式,下面這篇文章主要給大家介紹了關(guān)于vue2組件進(jìn)階與插槽的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue3 composition API實現(xiàn)邏輯復(fù)用的方法
本文主要介紹了Vue3 composition API實現(xiàn)邏輯復(fù)用的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue.js 圖標(biāo)選擇組件實踐詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了vuejs實現(xiàn)下拉框菜單選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
vue單行文本溢出會出現(xiàn)title提示自定義指令
這篇文章主要為大家介紹了vue單行文本溢出會出現(xiàn)title提示自定義指令，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了利用report分析vue項目中各文件大小問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
這篇文章主要介紹了vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要詳細(xì)介紹了vue如何獲取當(dāng)前系統(tǒng)時間,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
關(guān)于ElementUI自定義Table支持render
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10