資訊專欄INFORMATION COLUMN
摘要：大家中秋假期快樂，假期分享一些原理設(shè)計文章給大家原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學習凌晨寫的，不容易哈，收藏或者點個贊吧在常見的單頁應(yīng)用中，我們都會有一個根文件，里面放置一個然后配置路由來切換很多人在子父組件嵌套關(guān)系下的生命周期鉤子函數(shù)如何應(yīng)用，
大家中秋假期快樂，假期分享一些原理設(shè)計文章給大家
原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學習(凌晨寫的，不容易哈，收藏或者點個贊吧)
在常見的單頁應(yīng)用中，我們都會有一個根 App.vue 文件，里面放置一個 router-view 然后配置路由來切換.
很多人在子父組件嵌套關(guān)系下的生命周期鉤子函數(shù)如何應(yīng)用，誰先誰后（比如哪個用來發(fā)送請求，數(shù)據(jù)傳遞）等有所疑問。
本文聚焦 mounted 事件(需要 created 的可以留言哈)，先拋結(jié)論：
子組件一層一層往外觸發(fā)，最終觸發(fā)根 App.vue 的 mounted
驗證的做法很簡單：
你只需要在每一個組件里面的 mounted 增加打印日志就可以看到了，我們具體來看看設(shè)計原理
現(xiàn)在假設(shè)我們配置了路由：
一級是 /user/:id 二級是 profile
const router = new VueRouter({
routes: [
{
path: "/user/:id",
component: User,
children: [
{
// 當 /user/:id/profile 匹配成功，
// UserProfile 會被渲染在 User 的 中
path: "profile",
component: UserProfile
}
]
}
]
})
先看一下所有的 mounted 最終在各自組件里面是如何被調(diào)用的：
通過 vm.$options 獲取組件內(nèi)部的配置，然后通過 call 方法
下面的我們又會遇到 vnode（所以掌握它很重要，在前面的 vue.js 源碼原創(chuàng)系列 ref 與 $refs 如何關(guān)聯(lián) 也提到了一些 vnode，感興趣可以看看），就是下面 componentVNodeHooks 里面的 insert 函數(shù)的參數(shù)
var componentVNodeHooks = {
insert: function insert (vnode) {}
}
里面呢，第一步：從 vnode 里面獲取 componentInstance
var componentInstance = vnode.componentInstance;
然后判斷 _isMounted 是否已經(jīng)執(zhí)行過 mounted (很常用的狀態(tài)二次確定的變量，前面的 _ 一般代表內(nèi)部使用)
if (!componentInstance._isMounted) {
componentInstance._isMounted = true;
callHook(componentInstance, "mounted");
}
上面我們就用到了 callHook 函數(shù)了，傳入的第二個參數(shù)也正是本文討論的生命周期的 mounted
再往后有一個 invokeInsertHook 函數(shù)
function invokeInsertHook (vnode, queue, initial) {
}
注意一下源碼里面的注釋：
delay insert hooks for component root nodes, invoke them after the element is really inserted
設(shè)置了 pendingInsert(后面會在 initComponent 中使用)，代碼如下：
if (isTrue(initial) && isDef(vnode.parent)) {
vnode.parent.data.pendingInsert = queue;
}
內(nèi)部設(shè)計：循環(huán) queue 這個包含 vnode 的數(shù)組對象，如圖所示：
注意一下標注的 data.hook，下面的代碼片段會使用到，也就是調(diào)用上面提到的 componentVNodeHooks 對象的 insert：
for (var i = 0; i < queue.length; ++i) {
queue[i].data.hook.insert(queue[i]);
}
再往下，帶著疑問：
這個 queue 是如何生成 vnode 數(shù)組的呢？
最開始定義一個空數(shù)組：
var insertedVnodeQueue = [];
在剛才的 對象中還有 init
var componentVNodeHooks = {
init: function init () {
// ...
}
}
init 函數(shù)內(nèi)部定義一個 child
var child = vnode.componentInstance = createComponentInstanceForVnode(...)
然后會調(diào)用一個 $mount
child.$mount(hydrating ? vnode.elm : undefined, hydrating);
在函數(shù) initComponent 中會用到之前的 pendingInsert，而且 insertedVnodeQueue 這個數(shù)組對象會調(diào)用 push 插入元素
function initComponent (vnode, insertedVnodeQueue) {
if (isDef(vnode.data.pendingInsert)) {
insertedVnodeQueue.push.apply(insertedVnodeQueue, vnode.data.pendingInsert);
vnode.data.pendingInsert = null;
}
}
在函數(shù) invokeCreateHooks 內(nèi)部insertedVnodeQueue 這個數(shù)組對象會調(diào)用 push 插入元素
function invokeCreateHooks (vnode, insertedVnodeQueue) {
i = vnode.data.hook; // Reuse variable
if (isDef(i)) {
if (isDef(i.insert)) {
insertedVnodeQueue.push(vnode);
}
}
}
在函數(shù) mountComponent 內(nèi)部當 vm.$vnode 為 null 也會調(diào)用 callHook，第二個參數(shù)傳入 mounted
function mountComponent () {
if (vm.$vnode == null) {
vm._isMounted = true;
callHook(vm, "mounted");
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108542.html
摘要：大家中秋假期快樂，假期分享一些實戰(zhàn)文章給大家，原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學習現(xiàn)在大家基本都在單頁應(yīng)用里面使用了來緩存不活動的組件實例，而不是銷毀它們。 大家中秋假期快樂，假期分享一些實戰(zhàn)文章給大家，原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學習 現(xiàn)在大家基本都在單頁應(yīng)用里面使用了 keep-alive 來緩存不活動的組件實例，而不是銷毀它們。 如果你還沒有使用，可以看看官方的介紹（如果大家需要一些新手入...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
閱讀 3488·2021-09-02 09:53
閱讀 1808·2021-08-26 14:13
閱讀 2769·2019-08-30 15:44
閱讀 1331·2019-08-30 14:03
閱讀 1981·2019-08-26 13:42
閱讀 3029·2019-08-26 12:21
閱讀 1317·2019-08-26 11:54
閱讀 1910·2019-08-26 10:46
