如何正确学习vue3.0源码

最新推荐文章于 2024-07-11 11:58:12 发布

yyzzabc123

最新推荐文章于 2024-07-11 11:58:12 发布

阅读量96

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/yyzzabc123/article/details/127919622

版权

本文详细介绍了学习Vue3.0源码的重要性，包括技术成长、API设计目的和源码调试。分析了Vue3相对于Vue2的优化，如更小的打包体积、更快的渲染速度，并探讨了新特性如Teleport和Suspense。针对一些质疑，文章解释了Composition API如何改善逻辑复用和项目维护性，反驳了关于Vue3复杂化的误解，强调正确使用新API能提高代码质量。

摘要由CSDN通过智能技术生成

为什么要学源码

技术是第一生产力
学习 API 的设计目的、思路、取舍
学习优秀的代码风格
学习组织代码的方式
学习实现方法的技巧
学习 ES67 新 API、TS 高级用法
不给自己设限，不要让你周围人的技术上限成为你的上限
面试加分项
装逼利器

学习源码副作用

画虎不成反类犬（强行上马 vue3，自己焦头烂额、项目难以维护、同事苦不堪言）
为了用而用，而不是因地制宜
喜欢炫技写一下看似搞大上，实际没有可读性，影响团队协作的奇技淫巧

vue3 设计动机与目的

更好的逻辑复用与代码组织
- vue2 option api 的代码风格将同一逻辑点的代码分散在各处，会导致读者关注点分离，也不利于代码的逻辑复用；而 vue3 composition api 将同一业务逻辑的代码聚合在一起命名为 useXXX 函数，再通过 setup 将不同的逻辑组装起来并返回给组件 data，明显更方便逻辑复用。
- vue2 mixin 用于逻辑复用的时候容易导致命名冲突和数据来源不清晰；而 vue3 provide/inject 配合 composition api 可以很方便的找到数据来源并通过解构重命名，明显更方便逻辑复用。
更好的类型推导
- 在 methods 中 this 指向组件实例而不是 method 本身，不利于类型推导。
- 例如 this.router、this.store，每个新的插件都会需要向 Vue 追加类型定义。