Vue3.0 设计理念
2021-11-05 18:09:09 0 举报AI智能生成
Vue3.0 设计理念
作者其他创作
大纲/内容
快速状态更新
Vue 面临的挑战
有非常多样化的用户
有非常多样化的使用场景
- 将交互性结合到遗留的应用程序上
- 一次性项目需要快速周转，但不需要长期团队维护
- 可预测复杂度的中型项目
- 大型项目预计将持续数年，团队运作
设计包括解决权衡问题
- 为简单性而优化的API会导致会可维护性问题
- 重型工具增加了进入壁垒并限制了用例
- 更多的功能会导致更多的臃肿
...
框架必须
在多个维度上
进行考虑
在多个维度上
进行考虑
可接近性 VS 可扩展性
CDN构建 VS Vue脚手架
选项API vs 合成API
选项 API
优点
直观易用
缺点
大规模应用程序中的可扩展性问题
合成 API
优点
- 纯添加剂（不需要重写项目，它可以完美存在在一个已经运行起来的代码库中）
- 可与选项API一起使用
- 提供更灵活的代码组织和逻辑重用功能
- 提供出色的typescript支持
TypeScript vs JavaScript
ts
优点
- 优秀的IDE支持自动补全和类型信息
- 重构大型项目中旧代码时会更有信心
缺点
- 学习成本
- 开发初期会缓慢些（必须思考变量类型）
在 Vue3 中
- TS定义对JS用户也有好处
- 使用TS和JS的组件代码看起来基本相同
模板 vs JSX
为什么提供两种
作为一个包容的框架意味着对于不同背景的用户都易于使用
模板允许我们获得更好的性能
传统 虚拟dom 的瓶颈
尽管Vue可以确保组件树级别的更新最少，但它仍然是每个组件实例中的完全diff
传统VDOM的性能取决于模板的总大小，而不是模板中动态内容的数量。
完全动态的渲染函数逻辑
使得很难对用户意图进行安全的假设
来最大化 AOT 优化
使得很难对用户意图进行安全的假设
来最大化 AOT 优化
AOT 与 JIT
Ahead-of-Time (AOT) Just-in-Time (JIT)
the "time" referred to in those terms is "runtime"
a JIT compiler compiles the program as it is running
an AOT compiler compiles the program before it is running
the "time" referred to in those terms is "runtime"
a JIT compiler compiles the program as it is running
an AOT compiler compiles the program before it is running
模板的语法约束促使更好的优化
block tree
- 以结构化指令作为界限将模板分割成嵌套的块
- 每个块中node结构是静态的
- 每个块只需要一个扁平数组来跟踪动态节点
使用新策略，更新性能由动态内容的数量而不是总模板大小决定
能力 vs 大小
Vue2的困境
每个新特性都会增加每个用户的包大小
在Vue3中
- 大多数全局api和内部帮助程序以ES模块的方式被提供（ tree-shakable）
- 编译器也为模板生成 tree-shakable 的代码
- 不需要为你从未使用过的功能付出代价
tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。
框架一致性 vs 低层韧性
库 vs 框架
原始 vs 抽象
集市 vs 大教堂
原始 vs 抽象
集市 vs 大教堂
小职责范围
优点
刚开始需要理解的概念少
更好的灵活性 -> 活跃的生态系统，构建任意复杂的系统
团队拥有更小的维护层面，可以专注于他们认为重要的东西
缺点
用一个简单的概念去解决一个本来就很复杂的问题时需要做更多的钻研工作
模式自然会随着时间的推移而出现并成为半必需的知识，但通常没有在官方文档中提到
用 react 的过程中必须了解 redux，高阶组件，render props，hooks 以及在 js 中使用 css 的各种方式
生态系统发展太快可能会导致碎片化和持续的变动
大职责范围
优点
大多数常见问题可以被内置的抽象解决
集中式的设计流程确保了它与其生态系统的一致性：遇到具体问题的时候，不必去找一些不同的解决方案，只要看看框架让你做什么。
缺点
更高学习门槛
如果内置解决方案不适合当前用例，它会变得不灵活
引入一些底层新想法的成本更高，因为太多的地方都要保持一致性
维护负担大
渐进式框架
优点
使用分层设计，允许以渐进式的方式选择特性: 如果不需要路由、状态管理、构建步骤，可以使用没有任何特性的 Vue，只需要将 Vue.js 加载进页面中，就可以使用
低学习门槛
允许更多的人参与 Web 开发并专注开发，而不是先要学习一堆当前开发可能不需要的概念
对于常见问题文档上有解决方案
缺点
维护负担大
生态系统不会像小职责范围框架那样多样化
在Vue3中
- 与vue 2相同的连贯体验
- 甚至更低层次的灵活性
参考
https://juejin.im/post/5e02043f6fb9a0163a48412f
https://www.bilibili.com/video/av80289692?from=search&seid=4168209864401822538
职业：本科
0 条评论
下一页
