【DTSE Tech Talk 精选问答】NO.56丨手把手教你实现mini版TinyVue组件库

在前端Web开发过程中，跨版本兼容性问题是一个普遍存在的挑战。为了解决这些痛点，OpenTiny推出跨端、跨框架、跨版本组件库TinyVue。本期直播聚焦于华为云的前端开源组件库TinyVue，通过mini版TinyVue的代码实践与大家共同深入解读Vue2/Vue3不同版本间的差异。这对于提升用户体验，减低维护成本，提升开发者技术洞察有重要意义。
直播链接：https://bbs.huaweicloud.com/live/DTT_live/202404171630.html

Q：Vue2和Vue3的自定义指令（directive）机制有何不同？跨框架组件库是如何处理自定义指令的？

A:指令差异主要在指令钩子的名称上。 定义指令对象时，补充钩子名称即可。 钩子的入参变化不大。

Q：如何多个vue项目使用同一个node_modules

A:TinyVue不涉及这个内容。 建议使用pnpm等包管理工具

Q：模板层调用的组件状态保存在哪里呢？

A:组件状态是在逻辑层Renderless中构建的，并返回给模板。

Q：renderless函数在代码中是如何使用的？它的作用是什么？

A:模板文件中，没有任何的逻辑代码 。所有逻辑都抽离到renderless中了。 逻辑层主要包含了响应数据以及组件的事件方法

Q：跨版本组件库的代码迁移和升级策略有哪些注意事项？

A:跨版本组件库帮用户统一了组件的使用。用户的工程在升级、迁移中，无需过多修改，即能实现平滑升级。

Q：TinyVue在未来版本中计划引入哪些新特性或者改进，GIT上会经常互动吗

A:未来考虑跨其它前端框架，去统一组件的使用。 我们很关注GITHUB上的issue问题，欢迎互动。

Q：对于Vue2和Vue3中的$el属性，TinyVue是如何进行抽象和统一的？

A:使用vm.$el 统一了访问

Q：TinyVue和TinyNG两个组件库的适用场景有哪些不同？

A:TinyNg主要使用在华为云的控制台界面的开发上。 TinyVue是面向所有使用Vue框架的开发场景。

Q：TinyVue 对前端开发人员的技能要求有哪些？

A:使用tinyVue的话，没有特别要求。 如果是进行TinyVue的组件开发，要学会这套架构

Q：Vue2和Vue3的插槽（slot）机制有何不同？跨框架组件库是如何处理插槽的？

A:Vue的slot的模板语法，官方已经统一了。 在组件实例上，vue2使用 $scopedSlot, vue3使用 $slots. 我们使用vm.$slots进行统一了

Q：vue-common适配层，它解决了解决Vue不同版本间的兼容性问题，那么研发在开发过程引用需要注意什么吗？

A:适配层已经抹平了大量差异，在开发中，并不太需要注意什么。

Q：A:TinyVue在性能优化、SEO友好性、移动端适配等方面有哪些优势或特色？

A：TinyVue一直在完善功能，优化性能。 但是SEO 并不是组件库考虑的因素。你可以考虑使用服务端渲染 (SSR)等技术

Q：跨版本组件库的安全性是如何保障的？

A:组件库在某些组件内，使用了xss技术，除此之外并无过多安全性的防护。

Q：Vue3引入了Composition API，而Vue2主要使用Options API。跨框架组件库是如何在两者之间影响？

A:在适配层暴露了hooks变量

Q：TinyVue 组件库的版本控制和发布流程与Vue是否一致？

A:TinyVue有自己的发布周期，基本是每月1次。

Q：对于大型、复杂的应用场景，TinyVue如何确保在不同版本Vue下的渲染效率和内存管理？

A:在某些组件使用了虚拟滚动，或表格中，共享同一个popper对象等优化技术。

Q：TinyVue 与现有前端项目集成需要做哪些适配？

A:参考TinyVue官网文档适配即可

Q：TinyVue如何处理Vue 2.6中VNode的staticStyle和style属性？

A:TinyVue并未使用staticStyle

Q：如何解决pnpm 针对 Vue 不同版本Vue2、Vue3的依赖冲突？

A:通过不用文件夹来隔离冲突

Q：在TinyVue中，如何处理Vue2中已移除的$children和$scopedSlots等属性的访问问题？

A:Vue3的适配器中，通过遍历访问instance.subTree的结构，来构建了一个$children对象。 $scopedSlot是使用 $slots来代替的。

Q：适配层在代码中是如何体现的？它如何与模板和逻辑层进行交互？

A:在讲 模板层/适配层/逻辑层相互调用时， 详细讲了它们的调用关系。

Q：如何处理 Vue2/Vue3 版本间的生命周期钩子差异？

A:在OptionApi时，生命周期钩子名称是有差异的。 我们主要在setup中，使用composition中暴露的钩子名称，这个钩子名称 是统一的

Q：onMounted和onBeforeUnmount生命周期钩子与Vue 3的Composition API有何关系？

A:composition中暴露的钩子名称，这个钩子名称 是统一的。

Q：如何分辨业务逻辑是否与框架和渲染有关？

A:我们组件库的开发是通过业务需求驱动，但又不是完全按业务的要求，随意添加业务想要的功能。

Q：:value="count"和:step="100"是如何传递给组件的？这些属性在组件内部如何使用？

A:属性传递是Vue框架处理好的。在开发组件时，通过props变量就能访问属性

Q：mini 版 TinyVue 的适用场景有哪些？是否也有哪些使用限制？对系统环境有哪些要求？

A:Mini版本TinyVue是让用户学习TinyVue的架构的一个最方便的方法。 项目启动依赖node>18, pnpm>8 的要求

Q：TinyVue 组件库的可扩展性如何？支持开发者自定义新组件库吗？

A:TinyVue组件库可以通过designConfig的配置，来动态替换逻辑层的一些变量和函数，以适配多种规范。开发者编写新组件，按照规范开发，提交pr即可

Q：TinyVue是如何解决Vue2和Vue3版本间差异的问题的？

A:遵从求同去异，兼容并包的原则。 在模板层，使用相同的语法。 在逻辑层，使用兼容后的vm变量等技巧

Q：TinyVue 组件库相比Vue2和Vue3有哪些优势？

A:TinyVue是组件库，无法跟Vue进行相比。 它相比于其它组件库，最大的特色就是支持跨框架。

Q：对于不同时代的CSS特性、JavaScript新特性和浏览器兼容性问题，TinyVue如何确保组件的一致表现？

A:TinyVue组件库目前也是仅支持现在浏览器，对以前的IE等不支持了。

Q：跨端、跨框架、跨版本兼容是如何在TinyVue组件库中具体实现的？

A:跨端跨框架的架构已经在公开课上详细剖析了，可以下载代码再仔细研究一下

Q：TinyVue如何处理Vue 2和Vue 3之间的主要API差异，如Composition API、生命周期钩子变化等？

A:是通过适配层返回兼容对象，来抹平差异的。

Q：mini版TinyVue组件库支持的具体Vue版本有哪些，以及如何在不同版本间迁移？

A:mini版支持vue2.6/vue3。 正式的tinyVue还支持vue2.7. 在不同的版本间迁移，只需要修改组件包版本号即可。

Q：TinyVue是如何实现跨框架的，为了兼容两种vue版本，是不是做了很多妥协

A:TinyVue的驱动是来自于项目的需求，并没有做很多妥协。大部分需求都可以在这套架构下实现

Q：对于Vue2升级到Vue3的项目，TinyVue是否提供了最佳解决方案的策略？应该注意哪些方面？

A:TinyVue的架构就是为了满足跨框架的迁移，选择TinyVue就是最佳的方案，无需要注意什么。

Q：TinyVue 如何保障跨端和跨框架的兼容性？

A:通过适配层来保障兼容性

Q：如何处理 Vue2/Vue3 版本间的虚拟 DOM 实现差异？

A:通过适配层构建了一个h函数

Q：电脑模板和移动模板有什么不同，主要是针对什么场景使用？

A:多端的设计规范不同，所以需要使用各自的模板进行开发。

Q：在使用TinyVue的过程中，如果遇到版本兼容性问题，应该如何进行调试和排查？

A:可以安装vue dev tools工具，观察组件内的变量值是否正确。查看控制台报错的函数，进入tinyvue的源码中排查该函数等

Q：TinyVue在处理Vue2向Vue3迁移过程中可能遇到的问题时，提供了哪些解决方案？

A:TinyVue的架构就是为了满足跨框架的迁移，迁移时，修改组件库版本号即可。

Q：TinyVue提供了对Vue2和Vue3的兼容模式，是如何实现的？

A:通过添加适配层，抹平了Vue框架的大部分差异 。

Q：OpenTiny推出的TinyVue组件库主要解决了前端开发中的哪些问题？

A:对于库的开发者，减轻了开发，维护工作量；对于库的使用者，降低了学习成本，和迁移成本。

Q：TinyVue如何实现跨端、跨框架、跨版本的特性？

A:跨框架是通过使用适配层的技术，以及使用Vue2,Vue3的兼容语法，以及使用兼容并包的策略， 来解决的。 跨端是通过为同一个组件，编写2个模板，共用同一份逻辑的策略，来实现的。

Q：本期直播的主题为何聚焦于华为云的前端开源组件库TinyVue？

A:首先，TinyVue的跨框架的技术架构，在Vue生态中还不曾见，我们是第一个使用该架构的组件库。我们希望把我们的创新的想法分享给所有前端开发，贡献Vue生态的技术。 其次，TinyVue开源1年半了，期间有许多外部贡献的小伙伴提交pr。 但有些人不熟悉我们的架构，不能提交符合我们组件规范的代码。 通过此次mini-tiny-vue的极简的代码，有利于大家迅速掌握组件架构以及组件库的代码规范。 最后，也是TinyVue小组愿意结交更多的外部前端小伙伴，渴望得到更多的交流。我们现在有多个微信交流群，可以讨论TinyVue的技术，或提出一下问题、建议。

Q：mini版TinyVue的代码实践会涵盖哪些具体的Vue组件或功能？

A:mini-tiny-vue重要是演示架构的设计 ， 涵盖多少个组件并不重要。 在这个工程中，我只演示了button/counter两个组件

Q：对于开发者而言，掌握Vue版本间的差异对日常开发工作有何实际意义？

A:在vue2,vue3的开发中，游刃有余。并且知道vue3优化了哪些，去掉了哪些api， 就能指导日常开发中，要使用什么，避免使用什么。 vue3中的变化具有很强的“指导意义”， 让我们写出更“标准的vue组件”

Q：TinyVue 组件库有哪些亮点？跨版本组件库的维护和更新策略是怎么样的

A:目前的亮点是跨Vue的框架。 每月发布2个版本， 其中2.x的版本支持vue2, 3.x的版本号支持Vue3.

Q：TinyVue 除了VUE，还支持哪些前端框架和技术栈？ 如何处理 Vue2/Vue3 版本间的虚拟 DOM 实现差异？

A:未来计划支持react。 兼容虚拟DOM是通过适配层的h 函数。

Q：TinyVue 在不同浏览器和设备上如何保障兼容性 ？ TinyVue 在移动端开发中有哪些优势？

A:TinyVue组件支持组件的2个模板。 目前有几十个mobile端的组件了。

Q：mini 版 TinyVue 适用哪些场景?是否也会有哪些限制？mini 版 和原版TinyVue性能上是否有差异？ mini 版 TinyVue 是否可以与其他前端工具和框架集成？

A:mini版本tinyvue 仅是演示tinyvue的架构，便于学习。 它不适用于任何型业务场景。 mini版本的代码更少，但缺失了很多功能。 完整的跨框架建议直接使用tinyvue。

Q：跨版本组件库的安全性如何保障？针对它的兼容性测试范围应该覆盖哪些方面？

A:组件库在某些组件内，使用了xss技术，除此之外并无过多安全性的防护。

想要了解更多TinyVue组件库相关知识，欢迎观看DTSE Tech Talk 系列技术直播