

首页  思维导图  详情



Vue3.0 设计理念

2021-11-05 18:09:09   0  举报





AI智能生成

Vue3.0 设计理念

vue

设计理念

前端框架

模版推荐

作者其他创作

大纲/内容

快速状态更新

Vue 面临的挑战

有非常多样化的用户

有非常多样化的使用场景

<ul><li>将交互性结合到遗留的应用程序上 </li><li>一次性项目需要快速周转，但不需要长期团队维护 </li><li>可预测复杂度的中型项目 </li><li>大型项目预计将持续数年，团队运作 </li></ul>

设计包括解决权衡问题

<ul><li>为简单性而优化的API会导致会可维护性问题 </li><li>重型工具增加了进入壁垒并限制了用例 </li><li>更多的功能会导致更多的臃肿 ...</li></ul>

框架必须 在多个维度上 进行考虑

可接近性 VS 可扩展性

CDN构建 VS Vue脚手架

选项API vs 合成API

选项 API

优点

直观易用

缺点

大规模应用程序中的可扩展性问题

合成 API

优点

<ul><li>纯添加剂（不需要重写项目，它可以完美存在在一个已经运行起来的代码库中） </li><li>可与选项API一起使用 </li><li>提供更灵活的代码组织和逻辑重用功能 </li><li>提供出色的typescript支持 </li></ul>

TypeScript vs JavaScript

优点

<ul><li>优秀的IDE支持自动补全和类型信息 </li><li>重构大型项目中旧代码时会更有信心 </li></ul>

缺点

<ul><li>学习成本 </li><li>开发初期会缓慢些（必须思考变量类型）</li></ul>

在 Vue3 中

<ul><li>TS定义对JS用户也有好处 </li><li>使用TS和JS的组件代码看起来基本相同 </li></ul>

模板 vs JSX

为什么提供两种

作为一个包容的框架意味着对于不同背景的用户都易于使用

模板允许我们获得更好的性能

传统虚拟dom 的瓶颈

尽管Vue可以确保组件树级别的更新最少，但它仍然是每个组件实例中的完全diff

传统VDOM的性能取决于模板的总大小，而不是模板中动态内容的数量。

完全动态的渲染函数逻辑 使得很难对用户意图进行安全的假设 来最大化 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

模板的语法约束促使更好的优化

block tree

<ul><li>以结构化指令作为界限将模板分割成嵌套的块 </li><li>每个块中node结构是静态的 </li><li>每个块只需要一个扁平数组来跟踪动态节点 </li></ul>

使用新策略，更新性能由动态内容的数量而不是总模板大小决定

能力 vs 大小

Vue2的困境

每个新特性都会增加每个用户的包大小

在Vue3中

<ul><li>大多数全局api和内部帮助程序以ES模块的方式被提供（ tree-shakable） </li><li>编译器也为模板生成 tree-shakable 的代码 </li><li>不需要为你从未使用过的功能付出代价 </li></ul>

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。

框架一致性 vs 低层韧性

库 vs 框架 原始 vs 抽象 集市 vs 大教堂

小职责范围

优点

刚开始需要理解的概念少

更好的灵活性 -> 活跃的生态系统，构建任意复杂的系统

团队拥有更小的维护层面，可以专注于他们认为重要的东西

缺点

用一个简单的概念去解决一个本来就很复杂的问题时需要做更多的钻研工作

模式自然会随着时间的推移而出现并成为半必需的知识，但通常没有在官方文档中提到

用 react 的过程中必须了解 redux，高阶组件，render props，hooks 以及在 js 中使用 css 的各种方式

生态系统发展太快可能会导致碎片化和持续的变动

大职责范围

优点

大多数常见问题可以被内置的抽象解决

集中式的设计流程确保了它与其生态系统的一致性：遇到具体问题的时候，不必去找一些不同的解决方案，只要看看框架让你做什么。

缺点

更高学习门槛

如果内置解决方案不适合当前用例，它会变得不灵活

引入一些底层新想法的成本更高，因为太多的地方都要保持一致性

维护负担大

渐进式框架

优点

使用分层设计，允许以渐进式的方式选择特性: 如果不需要路由、状态管理、构建步骤，可以使用没有任何特性的 Vue，只需要将 Vue.js 加载进页面中，就可以使用

低学习门槛

允许更多的人参与 Web 开发并专注开发，而不是先要学习一堆当前开发可能不需要的概念

对于常见问题文档上有解决方案

缺点

维护负担大

生态系统不会像小职责范围框架那样多样化

在Vue3中

<ul><li>与vue 2相同的连贯体验 </li></ul>      router，Vuex&test-utils将有相应的更新以符合此版本 <ul><li>甚至更低层次的灵活性 </li></ul>      一流的自定义渲染器和定制的编译器api

参考

https://juejin.im/post/5e02043f6fb9a0163a48412f

https://www.bilibili.com/video/av80289692?from=search&seid=4168209864401822538

 Collect

Get Started

vue前端架构图

 Collect

Get Started

Mabang3.0新手上线信息配置

 Collect

Get Started

vue3.0 新特性

 Collect

Get Started





0 条评论

下一页