關于vue組件的引入方式有兩種

牡丹網站制作公司哪家好，找創(chuàng)新互聯(lián)！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、成都響應式網站建設等網站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)成立與2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創(chuàng)新互聯(lián)。

一、 同步引入

例子： import Page from '@/components/page'

二、異步引入

例子：const Page = () => import('@/components/page')


或者： const Page = resolve => require(['@/components/page'], page)

兩種引入方式的不同之處在于：

同步引入時生命周期順序為：父組件的beforeMount、created、beforeMount --> 所有子組件的beforeMount、created、beforeMount --> 所有子組件的mounted --> 父組件的mounted

例子：

異步引入時生命周期順序：父組件的beforeCreate、created、beforeMount、mounted --> 子組件的beforeCreate、created、beforeMount、mounted

在上面的代碼只需要修改引入的方式：

import Page from '@/components/page' // 同步方式引入
import New from '@/components/new'
import Job from '@/components/job'

改為：

const Page = () => import ('@/components/page') // 異步引入
const New = () => import ('@components/new')
const Job = () => import ('@/components/job'

結果：

總結

以上所述是小編給大家介紹的vue同步父子組件和異步父子組件的生命周期順序問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！