Vue3過渡動畫的示例分析

這期內容當中小編將會給大家帶來有關Vue3過渡動畫的示例分析，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

背景

在我的 《Vue 3 開發企業級音樂 App》課程問答區，有個同學提了個問題，在歌手列表到歌手詳情頁面到轉場動畫中，只有進入動畫，卻沒有離場動畫：

該學生確實在這個問題上研究了有一段時間，而且從他的描述，我一時半會兒也想不出哪有問題，于是讓他把代碼傳到 GitHub 上，畢竟直接從代碼層面定位問題是最靠譜的。

問題定位

一般遇到此類問題的時候，我的第一反應是他用的 Vue 3 版本可能有問題，畢竟 Vue 3 還在不斷迭代過程，某個版本有一些小 bug 是很正常的，于是我把他的項目的 Vue 3 版本升級到了最新的 3.2.26。

但運行后發現，該問題仍然存在。我感到有些困惑，于是跑了一下自己課程項目源碼，并沒有復現該問題，然后我又把自己課程項目的 Vue 3 版本也升級到最新，仍然沒有復現該問題。

通過上述分析，我基本排除了 Vue 3 版本的問題。本質上說，從歌手頁面切換到歌手詳情頁無非就是打開歌手詳情頁這個二級路由頁面，而從歌手詳情頁退回到歌手頁面無非就是移除歌手詳情頁這個二級路由頁面。于是我開始對比兩邊項目的歌手頁面以及詳情頁的源碼：

<!-- singer.vue -->

<template>

<div class="singer" v-loading="!singers.length">

  <index-list

    :data="singers"

    @select="selectSinger"

  ></index-list>

  <!-- 用router-view去承載二級路由 -->

<!--  <router-view :singer="selectedSinger"></router-view>-->

  <!-- vue3需要在router-view中使用transition, appear進入時候也會有動畫 -->

  <router-view v-slot="{ Component }">

<!--  singer-detail返回動畫無效 研究  -->

    <transition appear name="slide">

      <!-- component動態組件Component就是作用域插槽中的一個屬性，這個是由router-view這個組提供的

       Component就是你的路由表中的路由組件

       exclude="singer-detail"排除不緩存數據的組件否則會緩存數據導致每次數據都不重新請求

       -->

        <component :is="Component"

                   :singer="selectedSinger"

        ></component>

    </transition>

  </router-view>

</div>

</template>



<!-- singer-detail.vue -->

<template>

  <!-- 因為通過二級路由實現,所以放在views下 -->

  <section class="singer-detail">

    <music-list

      :songs="songs"

      :title="title"

      :pic="pic"

      :loading="loading"

    ></music-list>

  </section>

</template>

上邊是學生的代碼，接下來貼一下我項目的源碼：

<!-- singer.vue -->

<template>

  <div class="singer" v-loading="!singers.length">

    <index-list

      :data="singers"

      @select="selectSinger"

    ></index-list>

    <router-view v-slot="{ Component }">

      <transition appear name="slide">

        <component :is="Component" :data="selectedSinger"/>

      </transition>

    </router-view>

  </div>

</template>

<!-- singer-detail.vue -->

<template>

  <div class="singer-detail">

    <music-list

      :songs="songs"

      :title="title"

      :pic="pic"

      :loading="loading"

    ></music-list>

  </div>

</template>

經過對比，我感覺兩邊的源碼差別并不大，除了該學生會用注釋做一些學習筆記。一時間難以找出問題，于是我祭出了殺手锏——調試源碼。因為畢竟對于 Vue 3 過渡動畫的實現原理，我還是如數家珍的。

如果執行了退出過渡動畫，則一定會執行 transition 組件包裹的子節點解析出的 leave 鉤子函數。

于是我在 leave 鉤子函數內部加了個 debugger 斷點：

// @vue/runtime-core/dist/runtime.core-bundler.esm.js

leave(el, remove) {

  debugger

  const key = String(vnode.key);

  if (el._enterCb) {

    el._enterCb(true /* cancelled */);

  }

  // ...

}

接著運行項目，當我從歌手詳情頁回退到歌手頁面的時候，發現并沒有進入 debugger 斷點，也就意味著 leave 鉤子函數壓根沒有執行。

再往前追溯，對于即將卸載的節點，執行其 leave 鉤子函數的時機是在執行 remove 函數時，于是我在 remove 函數內部打上斷點：

// @vue/runtime-core/dist/runtime.core-bundler.esm.js

const remove = vnode => {

  debugger

  const { type, el, anchor, transition } = vnode;

  if (type === Fragment) {

    removeFragment(el, anchor);

    return;

  }

  if (type === Static) {

    removeStaticNode(vnode);

    return;

  }

  const performRemove = () => {

    hostRemove(el);

    if (transition && !transition.persisted && transition.afterLeave) {

      transition.afterLeave();

    }

  };

  if (vnode.shapeFlag & 1 /* ELEMENT */ &&

    transition &&

    !transition.persisted) {

    const { leave, delayLeave } = transition;

    const performLeave = () => leave(el, performRemove);

    if (delayLeave) {

      delayLeave(vnode.el, performRemove, performLeave);

    }

    else {

      performLeave();

    }

  }

  else {

    performRemove();

  }

};

接著再次運行項目，當我從歌手詳情頁回退到歌手頁面的時候，雖然進入了斷點，但也發現了一些代碼的邏輯問題：從 vnode 解析到了對應的 transition 對象，由于其對應的 type 是 Fragment，執行進入了下面這段邏輯：

if (type === Fragment) {

  removeFragment(el, anchor);

  return;

}

直接返回并沒有執行后續 transition 對象的 leave 鉤子函數。我繼續查看 vnode 的值，發現它有兩個子節點，一個注釋節點和一個 section 節點。我恍然大悟，原來是學生寫的注釋導致的問題：

<!-- singer-detail.vue -->

<template>

  <!-- 因為通過二級路由實現,所以放在views下 -->

  <section class="singer-detail">

    <music-list

      :songs="songs"

      :title="title"

      :pic="pic"

      :loading="loading"

    ></music-list>

  </section>

</template>

在 Vue 的模版解析中，遇到 HTML 注釋，也會把它解析成一個注釋節點，可以借助 Vue 3 的模版導出工具看一下它編譯后的結果：

import { createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

const _hoisted_1 = { class: "singer-detail" }

function render(_ctx, _cache) {

  const _component_music_list = _resolveComponent("music-list")

  return (_openBlock(), _createElementBlock(_Fragment, null, [

    _createCommentVNode(" 因為通過二級路由實現,所以放在views下 "),

    _createElementVNode("section", _hoisted_1, [

      _createVNode(_component_music_list, {

        songs: _ctx.songs,

        title: _ctx.title,

        pic: _ctx.pic,

        loading: _ctx.loading

      }, null, 8 /* PROPS */, ["songs", "title", "pic", "loading"])

    ])

  ], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */))

}

由于 Vue 3 支持了模版可以有不止一個的根節點，上述模版的根就會被解析成一個 Fragment 節點，這就導致了該組件在移除的時候并不會執行對應的過渡動畫。

進一步分析

那么為啥 Fragment 節點就不需要過渡動畫呢？我找到了代碼對應的提交注釋：

fix(fragment): perform direct remove when removing fragments This avoids trying to grab .el from hoisted child nodes (which can be created by another instance), and also skips transition check since fragment children cannot have transitions.

注釋給的解釋就是 Fragment 節點不可以有 transition 過渡。但這里還有一個問題，為什么這么寫不會影響進入過渡動畫呢？

因為在運行時執行組件 render 函數渲染組件的子樹 subTree 的時候，renderComponentRoot 函數內部做了一些特殊處理：

function renderComponentRoot(instance) {

  let result

  // ...

  // call render funtion to get the result

  // attr merging

  // in dev mode, comments are preserved, and it's possible for a template

  // to have comments along side the root element which makes it a fragment

  let root = result;

  let setRoot = undefined;

  if ((process.env.NODE_ENV !== 'production') &&

    result.patchFlag > 0 &&

    result.patchFlag & 2048 /* DEV_ROOT_FRAGMENT */) {

    [root, setRoot] = getChildRoot(result);

  }

  // inherit transition data

  if (vnode.transition) {

    // ...

    root.transition = vnode.transition;

  }

  return result

}

在通過執行組件實例的 render 方法拿到渲染的子樹后，在開發環境下通過 getChildRoot 函數對注釋節點做了一層過濾，得到結果 root，并且給它的根節點繼承了其 parent vnode 的 transition 對象。但是注意到，整個 renderComponentRoot 返回的還是 result 對象。

對于我們的示例 SingerDetil 歌手詳情組件，它的子樹 vnode 是一個 Fragment，但是在執行 renderComponentRoot 的時候，由于第一個節點是注釋節點，則被過濾，只有后面的實體節點 singer-detail 對應的 vnode 才有 transition 屬性，因此它有進入過渡動畫。

但是在組件移除的時候，由于組件的子樹 vnode 是一個 Fragment，因此不會有離開過渡動畫。

找到了 bug 的原因后，修復就很簡單了，直接把注釋節點刪除即可，當然生產環境不會有該問題，因為在默認情況下，生產環境會刪除注釋節點。 

上述就是小編為大家分享的Vue3過渡動畫的示例分析了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。