vue同步父子組件和異步父子組件的生命周期順序問題
更新時間：2018年10月07日 11:06:03 作者：不是laumlin
這篇文章主要介紹了vue同步父子組件和異步父子組件的生命周期順序問題,需要的朋友可以參考下
關(guān)于vue組件的引入方式有兩種
一、 同步引入
例子： 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
例子：
<! -- App.vue -->
<template>
<div id="app">
<New /> <!-- 子組件一 -->
<Page /> <!-- 子組件二 -->
<router-view/>
</div>
</template>
<script>
import Page from '@/components/page' // 同步方式引入
import New from '@/components/new'
export default {
name: 'App',
components: {
Page,
New
},
beforeCreate () {
console.log('父組件App -------> App beforeCreate')
},
created () {
console.log('父組件App -------> App created')
},
mounted () {
console.log('父組件App -------> App mounted')
},
beforeMount () {
console.log('父組件App -------> App beforeMount')
}
}
</script>
</script>
<!-- new.vue -->
<template>
<div>
<p>this is a new component</p>
</div>
</template>
<script>
export default {
name: 'new',
created () {
console.log('子組件new ----> new created')
},
beforeCreate () {
console.log('子組件new ----> new beforeCreate')
},
mounted () {
console.log('子組件new ----> new mounted')
},
beforeMount () {
console.log('子組件new ----> new beforeMount')
}
}
</script>
<!-- page.vue-->
<template>
<div>
<Job />
<p>this is a page component</p>
</div>
</template>
<script>
import Job from '@/components/job'
export default {
name: 'page',
components: {
Job,
},
beforeCreate () {
console.log('子組件page ----> page beforeCreate')
},
created () {
console.log('子組件page ----> page created')
},
mounted () {
console.log('子組件page ----> page mounted')
},
beforeMount () {
console.log('子組件page ----> page beforeMount')
}
}
</script>
<!-- job.vue -->
<template>
<div>
<p>this is a job component, in page.vue</p>
</div>
</template>
<script>
export default {
name: 'job',
created () {
console.log('孫組件job ------> job created')
},
beforeCreate () {
console.log('孫組件job ------> job beforeCreate')
},
mounted () {
console.log('孫組件job ------> job mounted')
},
beforeMount () {
console.log('孫組件job ------> job beforeMount')
}
}
</script>
異步引入時生命周期順序：父組件的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'
結(jié)果：
總結(jié)
以上所述是小編給大家介紹的vue同步父子組件和異步父子組件的生命周期順序問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了vue金額格式化保留兩位小數(shù)的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了bootstrap vue.js實現(xiàn)tab效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
基于Vue2.0+ElementUI實現(xiàn)表格翻頁功能
Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實現(xiàn)的組件庫，它面向企業(yè)級的后臺應(yīng)用，能夠幫助你快速地搭建網(wǎng)站，極大地減少研發(fā)的人力與時間成本。這篇文章主要介紹了Vue2.0+ElementUI實現(xiàn)表格翻頁功能,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了vue中echarts@4.9版本地圖的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要介紹了antd table按表格里的日期去排序操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了Vue模板語法v-bind教程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要介紹了Vue組件為什么data必須是一個函數(shù)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要給大家分享的是Vue3的幾個優(yōu)勢，Vue3仍然在源碼、性能和語法 API 三個大的方面進行了優(yōu)化，下面我們一起進入文章看看具體詳情吧2021-10-10
Vue實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法
今天小編就為大家分享一篇Vue實現(xiàn)調(diào)節(jié)窗口大小時觸發(fā)事件動態(tài)調(diào)節(jié)更新組件尺寸的方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法
這篇文章主要為大家介紹了Element-ui中的Cascader級聯(lián)選擇器基礎(chǔ)用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06