Javascript

Vue3 Transition 踩坑记

本文主要是介绍Vue3 Transition 踩坑记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Vue3 Transition 踩坑记

背景

  • 我本来想尝试新版本的特性,结果踩了个大坑。在这里分享一下我的经验,希望能让大家少走弯路

上代码

<template>
    <!-- 错误写法 -->
    <Transition><!-- xxxx --></Transition>
</template>

<script setup></script>
  • 上述代码错误信息:

  • 有趣的是,官方文档 中并没有提到 Transition 子元素不能包含注释。

踩坑历程

  1. 第一步:看到 Cannot read properties of undefined (reading 'loc'),习惯性(Uncaught (in promise) ReferenceError: xxxxx is not defined) 地在本地 Transition.vue 页面中寻找 loc 变量,结果没有找到。然后我在全局查找,还是没有找到 loc 变量。(其实这一步是多余的,因为错误信息 [plugin:vite:vue] Cannot read properties of undefined (reading 'loc'),并不是由于本地文件没有 loc 变量导致的,而是因为源码内部插件报的错误。)

  2. 第二步:查看源码 warnTransitionChildren.ts

    • 编译前
    • 编译后
    • 查看源码得知,Transition 组件内必须包含 一个元素只有一个根元素的组件 且不能是注释, 才能通过运行时编译。
  3. 第三步:尝试修改。在 Transition 组件里包含一个元素,发现它通过了。

  4. 第四步: 看单测源码 warnTransitionChildren.spec.ts,对于喜欢深入了解的同学可以看一下。

总结

  1. Transition 组件 子元素不能包含注释,这会导致无法通过运行时编译,导致组件不能正确渲染。(我踩了半小时的坑,不要跟我一样)
  2. 模板编译中,Transition 子元素不允许多个组件或元素,否则编译不通过,根据单测源码得知,如果需要多个分支,可以使用 v-if, v-if-else 来确定具体分支。
  3. Transition 子元素的组件中可以包含注释,但是不要包含太多,不然会影响渲染效率。

希望大家能从我的经验中获得一些收获,避免重复踩坑。

特殊字符描述:

  1. 问题标注 Q:(question)
  2. 答案标注 R:(result)
  3. 注意事项标准:A:(attention matters)
  4. 详情描述标注:D:(detail info)
  5. 总结标注:S:(summary)
  6. 分析标注:Ana:(analysis)
  7. 提示标注:T:(tips)
这篇关于Vue3 Transition 踩坑记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!