Vue 3.0 核心仍然通过一个简单的 script 标签来使用,但其内部结构已经被重写,并解耦成一个个模块的集合。新的架构下为源码提供了更好的可维护性,并允许终端用户通过 tree-shaking 的形式将减少一半的运行时体积。
这些模块还暴露了底层 API,解锁了许多高级用法:
编译器支持自定义 AST 转换,用于在构建时自定义(如,在构建时进行 i18n 国际化操作)
核心运行时提供了一系列 API,用于针对不同渲染目标(如 native moile、WebGL 或终端)的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。
@vue/reactivity
模块导出的功能,可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用(如 lit-html),甚至是在非 UI 场景中使用。
在 Vue 3.0 中,基于对象的 2.x API 基本没有变化,并引入了 Composition API — 一套全新的 API,旨在解决 Vue 在大规模应用场景中的痛点。Composition API 构建于响应式 API 之上,实现了类似于 React hook 的逻辑组成与复用,相较于 2.x 基于对象的 API 方式来说,拥有更加灵活的代码组织模式,以及更为可靠的类型推断能力。
Composition API 同时还提供了适用于 Vue 2.x 的版本,可通过 @vue/composition-api
插件来在项目中使用,目前已有适用于 Vue 2 和 Vue 3 的 Composition API 实用的工具库(如 vueuse
,vue-composable
)。
Vue 3 与 Vue 2 相比,在 bundle 包大小方面(tree-shaking 减少了 41% 的体积),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及内存占用方面(减少了 54%)都有着显著的性能提升。
Vue 3 的代码库完全采用 TypeScript 编写,自动生成、测试并构建类型声明。Composition API 可以很好的进行类型推断。Vetur,官方推出的 VSCode 插件,现已支持对模板表达式和 props 的类型检查,同时,Vue 3 已全面支持 TSX。
我们为单文件组件提出了两个实验性新特性(SFC,又称为 .vue 文件):
< script setup> :在 SFC 内使用 Composition API 的语法糖 < style vars> :在 SFC 中支持将状态作为 CSS 变量注入到样式中
我们还实现了一个目前尚未编写文档的 Suspense 组件,它允许在初始渲染或 branch 切换时,等待嵌套的异步依赖(异步组件或带有 async setup() 组件)。我们正在与 Nuxt.js 团队一起测试和迭代此功能(Nuxt 3 正在开发中),并可能会在 3.1 时完善它。
由于时间限制,我们推迟了迁移构建(v3 兼容 v2 的构建,以及迁移警告)和兼容 IE11 的计划,并打算在 2020 年 Q4 集中进行。
对于发布后的一段时间内,我们将重点关注:
迁移构建 支持 IE11 Router 以及 Vuex 与 devtools 的集成 对 Vetur 中模板类型推断的进一步改进 目前,Vue 3 及其相关子项目的文档站、github 分支以及 npm 的 dist 标签都将保持在 next 状态。这意味着 npm install vue 仍会安装 2.x 版本,而通过 npm install vue@next 将会安装 v3 版本。我们计划在 2020 年底之前将所有文档链接,分支以及 npm 标签全部切为 3.0。
与此同时,我们已开始规划 2.7 版本,这将会是 2.x 的最后一个小版本。2.7 将与 v3 进行兼容改进,并对使用 v3 中已删除/更改的 API 发出警告,以更好的帮助 3.0 的迁移升级工作。我们计划在 2021 年 Q1 进行 2.7 的工作,发布后将直接成为 LTS 版本,维护周期为 18 个月。
相关链接 Vue 3.0 来了,我们该做些什么? Vue最全知识点(基础到进阶,覆盖vue3.0,持续更新整理,欢迎补充讨论)
可以直接在浏览器中渲染 vue 写法的模版解决方案。
HTML 模板引擎,基于 tagged template 的,使得它不用编译就可以在浏览器上运行。
function App() {
const msg = 'Hello World';
return html`
<div>${msg}</div>
`;
}
lit-element 遵守 Web Components 标准,它是一个 class,基于它可以快速创建 Web Component。
作者认为,浏览器原生能力足够好用的时候,React 等也会像 jQuery 一样被浏览器原生能力替代。 Web Components 的一些主要功能:
- Custom elements: 自定义元素
- 生命周期函数 在 Custom elements 的构造函数中,可以指定多个回调函数: connectedCallback:元素首次被插入文档 DOM 时 disconnectedCallback:元素从文档 DOM 中删除时 adoptedCallback:元素被移动到新的文档时 attributeChangedCallback: 元素增加、删除、修改自身属性时
- Shadow DOM
- Templates: 模板