成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

[vuejs 踩坑實(shí)戰(zhàn)系列] 路由場(chǎng)景下父子組件的生命周期順序來(lái)個(gè)刨根問底

FreeZinG / 3078人閱讀

摘要：大家中秋假期快樂，假期分享一些原理設(shè)計(jì)文章給大家原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)凌晨寫的，不容易哈，收藏或者點(diǎn)個(gè)贊吧在常見的單頁(yè)應(yīng)用中，我們都會(huì)有一個(gè)根文件，里面放置一個(gè)然后配置路由來(lái)切換很多人在子父組件嵌套關(guān)系下的生命周期鉤子函數(shù)如何應(yīng)用，

大家中秋假期快樂，假期分享一些原理設(shè)計(jì)文章給大家

原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)(凌晨寫的，不容易哈，收藏或者點(diǎn)個(gè)贊吧)

在常見的單頁(yè)應(yīng)用中，我們都會(huì)有一個(gè)根 App.vue 文件，里面放置一個(gè) router-view 然后配置路由來(lái)切換.

很多人在子父組件嵌套關(guān)系下的生命周期鉤子函數(shù)如何應(yīng)用，誰(shuí)先誰(shuí)后（比如哪個(gè)用來(lái)發(fā)送請(qǐng)求，數(shù)據(jù)傳遞）等有所疑問。

本文聚焦 mounted 事件(需要 created 的可以留言哈)，先拋結(jié)論：

子組件一層一層往外觸發(fā)，最終觸發(fā)根 App.vue 的 mounted

驗(yàn)證的做法很簡(jiǎn)單：

你只需要在每一個(gè)組件里面的 mounted 增加打印日志就可以看到了，我們具體來(lái)看看設(shè)計(jì)原理

現(xiàn)在假設(shè)我們配置了路由：

一級(jí)是 /user/:id 二級(jí)是 profile

const router = new VueRouter({
  routes: [
    { 
      path: "/user/:id", 
      component: User,
      children: [
        {
          // 當(dāng) /user/:id/profile 匹配成功，
          // UserProfile 會(huì)被渲染在 User 的  中
          path: "profile",
          component: UserProfile
        }
      ]
    }
  ]
})

先看一下所有的 mounted 最終在各自組件里面是如何被調(diào)用的：

通過 vm.$options 獲取組件內(nèi)部的配置，然后通過 call 方法

下面的我們又會(huì)遇到 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ù)了，傳入的第二個(gè)參數(shù)也正是本文討論的生命周期的 mounted

再往后有一個(gè) invokeInsertHook 函數(shù)

function invokeInsertHook (vnode, queue, initial) {
}

注意一下源碼里面的注釋：

delay insert hooks for component root nodes, invoke them after the element is really inserted

設(shè)置了 pendingInsert(后面會(huì)在 initComponent 中使用)，代碼如下：

if (isTrue(initial) && isDef(vnode.parent)) {
  vnode.parent.data.pendingInsert = queue;
}

內(nèi)部設(shè)計(jì)：循環(huán) queue 這個(gè)包含 vnode 的數(shù)組對(duì)象，如圖所示：

注意一下標(biāo)注的 data.hook，下面的代碼片段會(huì)使用到，也就是調(diào)用上面提到的 componentVNodeHooks 對(duì)象的 insert：

for (var i = 0; i < queue.length; ++i) {
  queue[i].data.hook.insert(queue[i]);
}

再往下，帶著疑問：

這個(gè) queue 是如何生成 vnode 數(shù)組的呢？

最開始定義一個(gè)空數(shù)組：

var insertedVnodeQueue = [];

在剛才的 對(duì)象中還有 init

var componentVNodeHooks = {
  init: function init () {
    // ...
  }
}

init 函數(shù)內(nèi)部定義一個(gè) child

var child = vnode.componentInstance = createComponentInstanceForVnode(...)

然后會(huì)調(diào)用一個(gè) $mount

child.$mount(hydrating ? vnode.elm : undefined, hydrating);

在函數(shù) initComponent 中會(huì)用到之前的 pendingInsert，而且 insertedVnodeQueue 這個(gè)數(shù)組對(duì)象會(huì)調(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 這個(gè)數(shù)組對(duì)象會(huì)調(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)部當(dāng) vm.$vnode 為 null 也會(huì)調(diào)用 callHook，第二個(gè)參數(shù)傳入 mounted

function mountComponent () {
  if (vm.$vnode == null) {
    vm._isMounted = true;
    callHook(vm, "mounted");
  }
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108542.html

相關(guān)文章

  • [vuejs 踩坑實(shí)戰(zhàn)系列] keep-alive 被 beforeRouteEnter 騙了

    摘要：大家中秋假期快樂，假期分享一些實(shí)戰(zhàn)文章給大家，原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí)現(xiàn)在大家基本都在單頁(yè)應(yīng)用里面使用了來(lái)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。 大家中秋假期快樂，假期分享一些實(shí)戰(zhàn)文章給大家，原創(chuàng)不易，歡迎轉(zhuǎn)發(fā)，一起學(xué)習(xí) 現(xiàn)在大家基本都在單頁(yè)應(yīng)用里面使用了 keep-alive 來(lái)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。 如果你還沒有使用，可以看看官方的介紹（如果大家需要一些新手入...

    MrZONT 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

  • Vue.js學(xué)習(xí)

    摘要：一基礎(chǔ)學(xué)習(xí)模式下圖不僅概括了模式，還描述了在中是如何和以及進(jìn)行交互的。關(guān)于這一點(diǎn)我們將在后續(xù)反應(yīng)系統(tǒng)中討論。父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。這個(gè)對(duì)象必須是普通對(duì)象原生對(duì)象，及原型屬性會(huì)被忽略。 Vue.js 是用于構(gòu)建交互式的 Web 界面的庫(kù)。Vue.js 提供了 MVVM 數(shù)據(jù)綁定和一個(gè)可組合的組件系統(tǒng)，具有簡(jiǎn)單、靈活的 API。 其實(shí)和Jquery一樣...

    TIGERB 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<