vue.3.0 dom赋值_关于 Vue 3.0 你需要了解些什么

Vue 3.0 早已经公开源代码了，感兴趣的小伙伴可以去 https://github.com/vuejs/vue-next 查看。

本文内容：

• Vue 3.0 设计目标

• Vue 3.0 兼容性

• Vue 3.0 Beta 源码阅读

Vue 3.0 设计目标

总的来说，Vue 3.0 的设计目标主要有以下几点：

• 更小

• 更快

• 加强 API 设计一致性

• 加强 Typescript 支持

• 提高自身可维护性

• 开放更多底层功能

我们一个个来看一下，Vue 3.0 的一些设计理念和实现方式调整，以及对开发者来说要怎样理解。以下内容基本上有了解 Vue 3.0 的开发者都已经从作者的分享、网上的 PPT 资源或是介绍说明中接触到，这里依然会先介绍一下。

更小

Tree-shaking

什么是 Tree-shaking 呢？我们在进行项目开发的时候，经常会需要引入一些开源库。但是大多数时候我们都只会使用到这个开源库中的一小部分内容，Tree-shaking 用于描述移除 JavaScript 上下文中的未引用代码。也就是说，我们在打包代码的时候，会自动移除未用到的一些特性和功能代码，以此来减少生成的代码文件大小。

在 Vue 3.0 中，全局 API 和内置组件、功能都将支持 Tree-shaking。

~10kb gzipped

新的运行时，代码尺寸将控制在 10kb gzipped 上下。

更快

Virtual DOM

传统 Virtual DOM 有以下性能瓶颈：

1. 虽然 Vue 能够保证触发更新的组件最小化，但在单个组件内部依然需要遍历该组件的整个 Virtual DOM 树。

2. 在一些组件整个模版内只有少量动态节点的情况下，这些遍历都是性能的浪费。

3. 传统 Virtual DOM 的性能跟模版大小正相关，跟动态节点的数量无关。

在 Vue 3.0 中，Virtual DOM 会完全重写，通过动静结合的模式来进行突破，更新速度和内存占用均有质的提升，整体比 Vue2 性能提升 2-5 倍。具体实现方式包括：

1. 通过模版静态分析生成更优化的 Virtual DOM 渲染函数，将模版切分为 block( if, for, slot)。

2. 每个 block 内部动态节点位置是固定的，同时每个 block 的根节点会记录自己所包含的动态节点(包含子 block 的根节点)。

3. 更新时只需要直接遍历动态节点，Virtual DOM 的更新性能与模版大小解耦，变为与动态节点的数量相关。

这里可以简单理解为，Virtual DOM 的更新从以前的整体作用域调整为树状作用域，树状的结构会带来算法的简化以及性能的提升。

观察者机制

Proxy 对象是什么呢，它用于定义基本操作的自定义行为(如属性查找，赋值，枚举，函数调用等)，通过 newProxy(target,handler)来创建，参数说明如下：

参数	说明
target	用 Proxy 包装的目标对象(可以是任何类型的对象，包括原生数组，函数，甚至另一个代理)
handler	一个对象，其属性是当执行一个操作时定义代理的行为的函数

同时 handler参数中，常用的方法包括：

• handler.get(): 用于拦截对象的读取属性操作

• handler.set(): 用于拦截设置属性值的操作

• handler.getPrototypeOf(): 当读取代理对象的原型时，该方法就会被调用

• handler.has(): 针对 in操作符的代理方法

我们能看到，当我们给某个对象添加了代理之后，就可以改变一些原有的行为，或是通过钩子的方式添加一些处理，我们用来触发界面更新、其他数据更新等也是可以的。

相比于之前的 getter/setter 监控数据变更，Vue 3.0 将会是基于 Proxy 的变动侦测，通过代理的方式来监控变动，整体性能会得到优化。同时从长远来看，JS 引擎会持续优化 Proxy(getter/setter 基本不会变化)。

编译时优化

编译器架构重构，更多编译时(compile-time)会得到优化，以减少 runtime 开销。

加强 API 设计一致性

Vue 3.0 整体使用 Function-based API，对比 Class API，拥有以下优势：

• 更灵活的逻辑复用能力

• 更好的 TypeScript 类型推导支持

• 更好的性能

• Tree-shaking 友好

• 代码更容易被压缩

加强 Typescript 支持

Vue 3.0 本身用 TypeScript 重写，内置 typing，支持 TSX，同时不会影响不使用 TS 的用户。

开放更多底层功能

底层 API 会更多地开放给开发者使用，例如自定义渲染能力:

import { createRenderer } from "@vue/runtime-core";const { render } = createRenderer({
      nodeOps,  patchData});

Vue 3.0 兼容性

对于大多数开发者来说，尤其是经历过 Angular 断崖式升级的小伙伴们，对框架升级最担心的是兼容性。新能力大家当然想用，但对于项目和业务来说，稳定性是首位的，所以很多人会担心框架升级是否部分功能不可用。Vue 3.0 有不少新的想法和改动，但基本上兼容性大部分是没问题的。总体来看，除渲染函数 API 和 scoped-slot语法之外，其余均保持不变或者将通过另外构建一个兼容包来兼容 2.x。

根据作者介绍的 Vue 3.0 计划中，以下是计划中的公共 API 更改：

• 模板语法将保持 99%不变。 scoped-slot语法可能会有一些小的调整，但是除此之外，没有计划更改模板的其他任何内容

• API 在设计时考虑了 TypeScript 的类型推断，3.x 代码库本身将使用 TypeScript 编写࿰