乐趣区

关于vue.js: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)

    往期举荐:

  8. 前端面试实录 HTML 篇
  9. 前端面试实录 CSS 篇
  10. JS 如何判断一个元素是否在可视区域内?
  11. Vue2、3 生命周期及作用?
  12. 排序算法:QuickSort
  13. 箭头函数与一般函数的区别?
  14. 这是你了解的 CSS 选择器权重吗?
  15. JS 中 call, apply, bind 概念、用法、区别及实现?
  16. 罕用位运算办法?
  17. Vue 数据监听 Object.definedProperty()办法的实现
  18. 为什么 0.1+ 0.2 != 0.3,如何让其相等?
  19. 聊聊对 this 的了解?
  20. JavaScript 为什么要进行变量晋升,它导致了什么问题?

    最初:

  21. 欢送关注『前端进阶圈』公众号,一起摸索学习前端技术 ……
  22. 公众号回复 加群 或 扫码, 即可退出前端交流学习群,一起高兴摸鱼和学习 ……
  23. 公众号回复 加好友,即可添加为好友
退出移动版