Vue3.0的新特性

528 阅读3分钟

1. 多方面改进

1.1更快(重点)

  1. 虚拟DOM重写
  2. 优化slots的生成
  3. 静态树提升
  4. 静态属性提升
  5. 基于Proxy的响应式系统

1.2更小

通过摇树优化核心库体积

1.3更容易维护

TypeScript + 模块化 ,在vscode上的提示跟友好,代码提示类型检测。

1.4更加友好

跨平台:编译器核心和运行时核心与平台无关,使得Vue更容易与任何平台(Web、 Android、iOS)一起使用

1.5更容易使用

  1. 改进的TypeScript支持,编辑器能提供强有力的类型检查和错误及警告
  2. 更好的调试支持
  3. 独立的响应化模块
  4. Composition API (逻辑的复用,类似react的hooks)

2.重点描述

2.1虚拟 DOM 重写

有更详细的虚拟dom信息,可以在编译时提示/警告/报错来减少运行时开销,使用更有效的代码来创建虚拟节点。组件快速路径+单个调用+子节点类型检测

  • 跳过不必要的条件分支
  • JS引擎更容易优化
  • 不同的节点使用不同的创建方法(cteateComponentVNode/createElementVnode),更加精细和准确描述每一个节点
  • 新增了创建节点的第4个参数描述有没有子节点 cteateComponentVNode(Comp,null,null,0) // 0代表没有,2代表单个子节点。更具体的描述了是否需要创建子节点。 image.png

2.2优化slots生成

vue3中可以单独重新渲染父级和子级

  • 确保实例正确的跟踪依赖关系
  • 避免不必要的父子组件重新渲染 image.png

2.3静态树提升(Static Tree Hoisting)

使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态的,然后将其提升,从而降低了渲染成本。

  • 在列子中,由于class='foo'的span 已经知道是静态的,所以不用再执行渲染函数,直接把结果先输出为__static1,父组件直接引用即可。
  • 跳过修补整棵树,从而降低渲染成本,通过检查static类型知道可以跳过。
  • 即使多次出现也能正常工作
    image.png

2.4静态属性提升

使用静态属性提升,Vue 3打补丁时将跳过这些属性不会改变的节点。

  • 当所有属性都没有变化的时候,也把内容提升,发现没有变化的标识,直接跳过patch image.png

2.5基于 Proxy 的数据响应式

Vue 2的响应式系统使用Object.defineProperty的getter和setter。Vue 3 将使用 ES2015 Proxy 作为其观察机制,这将会带来如下变化:

  • 组件实例初始化的速度提高100%
  • 使用Proxy节省以前一半的内存开销,加快速度,但是存在低浏览器版本的不兼容
  • 为了继续支持 IE11,Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建

2.6高可维护性

Vue 3 将带来更可维护的源代码。它不仅会使用 TypeScript,而且许多包被解耦,更加模块化。 由于包更加独立,将来做跨平台移植也更容易。

packages--
> complier-core  //核心库
> complier-dom   //浏览器特有
> complier-sfc
> complier-ssr
> reactivity    //响应式
> runtime-core  
> runtime-dom
> runtime-test
> server-renderer
> shared
> vue