關於Vue3過渡動畫的踩坑記錄

Posted on 2021-12-26 by WalkonNet

背景

在我的《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 的原因後，修復就很簡單瞭，直接把註釋節點刪除即可，當然生產環境不會有該問題，因為在默認情況下，生產環境會刪除註釋節點。

從這個案例來看，寫註釋雖然是個好習慣，但是一不小心可能會踩瞭 Vue 3 的坑。

學會源碼調試還是很重要的，如果不瞭解源碼，遇到此類 bug 就會一臉懵逼，非常被動，因為文檔不會告訴你原因。因此我還是鼓勵大傢多學習源碼，通過調試源碼，你才能最接近事實的真相。

到此這篇關於關於Vue3過渡動畫的踩坑記錄的文章就介紹到這瞭,更多相關Vue3過渡動畫踩坑內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

關於Vue3過渡動畫的踩坑記錄

目錄

背景

問題定位

進一步分析

總結

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

背景

問題定位

進一步分析

總結

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆