Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you an example analysis of Vue3 transition animation. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Background

In the question and answer section of my "Vue 3 Development Enterprise Music App" course, a classmate asked a question: in the list of singers to the singer details page to the transition animation, only enter the animation, but not leave the animation:

The student did study this problem for some time, and from his description, I couldn't figure out what was wrong at 01:30, so I asked him to send the code to GitHub. After all, it was most reliable to locate the problem directly from the code level.

Problem positioning

When I encounter this kind of problem, my first reaction is that there may be a problem with the Vue 3 version he uses. After all, Vue 3 is still in the iterative process, and it is normal for a certain version to have some small bug, so I upgraded the Vue 3 version of his project to the latest 3.2.26.

But after running, it is found that the problem still exists. I was a little confused, so I ran the source code of my course project and did not reproduce the problem, and then I upgraded the Vue 3 version of my course project to the latest version, but still did not reproduce the problem.

Through the above analysis, I basically ruled out the problem of the Vue 3 version. In essence, switching from the singer page to the singer details page is nothing more than opening the singer details page, which is a secondary routing page, while returning from the singer details page to the singer page is nothing more than removing the singer details page. So I began to compare the source code of the singer page and the details page of the two projects:

The above is the student's code, and then post the source code of my project:

After comparison, I feel that the two sides of the source code is not much different, except that the student will use notes to make some study notes. It was difficult to find the problem for a while, so I came up with a killer mace-debugging the source code. Because after all, I still know a lot about the principle of Vue 3 transition animation.

If the exit transition animation is performed, the leave hook function parsed by the child nodes wrapped by the transition component must be executed.

So I added a debugger breakpoint inside the leave hook function:

/ / @ vue/runtime-core/dist/runtime.core-bundler.esm.jsleave (el, remove) {debugger const key = String (vnode.key); if (el._enterCb) {el._enterCb (true / * cancelled * /);} / /.}

Then I ran the project, and when I went back to the singer page from the singer details page, I found that I did not enter the debugger breakpoint, which means that the leave hook function was not executed at all.

Looking back, for the node that is about to be unloaded, the time to execute its leave hook function is when the remove function is executed, so I put a breakpoint inside the remove function:

/ / @ vue/runtime-core/dist/runtime.core-bundler.esm.jsconst 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 ();}}

Then run the project again. When I retreated from the singer details page to the singer page, although I entered the breakpoint, I also found some logic problems in the code: parsing from vnode to the corresponding transition object, because the corresponding type is Fragment, the execution entered the following logic:

If (type = Fragment) {removeFragment (el, anchor); return;}

Directly returns the leave hook function that does not execute the subsequent transition object. I went on to look at the value of vnode and found that it had two child nodes, a comment node and a section node. It dawned on me that it was the notes written by the students that caused the problem:

In the template parsing of Vue, if you encounter HTML comments, you will also parse it into a comment node. You can use the template export tool of Vue 3 to take a look at its compiled results:

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) ("because it is implemented through secondary routing So put it under 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 * /)}

Because Vue 3 supports that templates can have more than one root node, the root of the above template will be resolved into a Fragment node, which causes the component to not perform the corresponding transition animation when it is removed.

Further analysis

So why don't Fragment nodes need transition animation? I found the submission comment for the code:

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.

The explanation given by the comment is that Fragment nodes cannot have transition transitions. But there is also a question, why this writing will not affect the transition into the animation?

Because when the component render function renders the subtree subTree of the component at run time, some special handling is done inside the renderComponentRoot function:

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}

After getting the rendered subtree by executing the render method of the component instance, the annotation node is filtered by the getChildRoot function in the development environment to get the result root, and its root node inherits the transition object of its parent vnode. Notice, however, that the entire renderComponentRoot returns a result object.

For our example SingerDetil singer details component, its subtree vnode is a Fragment, but when executing renderComponentRoot, because the first node is a comment node, it is filtered, and only the vnode corresponding to the later entity node singer-detail has the transition attribute, so it has a transition animation.

However, when the component is removed, because the component's subtree vnode is a Fragment, there is no leave transition animation.

Once the reason for bug is found, the repair is simple. Just delete the comment node. Of course, this problem will not occur in the production environment, because by default, the comment node will be deleted in the production environment.

The above is the example of the Vue3 transition animation shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.