vue3，对比 vue2 有什么优点？ - 网站源码_资源分享

全文：Vue3新版本的经营理念成形于 2018 年初，彼时的 Vue 2 早已有八岁了。较之rides的开发周期来这好似也没那么久，Vue3在2020年正式宣布面世，在源代码和API都有非常大变动，操控性获得了明显的提高，比Vue2.x快1.2~2倍。

责任编辑撷取自宏碁云街道社区《【云驻共筑】vue3 较之 vue2 的九项缺点》，译者：海拥。

Vue3新版本的经营理念成形于 2018 年初，彼时的 Vue 2 早已有两岁半了。较之rides的开发周期来这好似也没那么久，Vue3在2020年正式宣布面世，在源代码和API都有非常大变动，操控性获得了明显的提高，比Vue2.x快1.2~2倍。

当中，一些较为重要的缺点有：

diff演算法的强化；hoistStatic 静态提高；cacheHandlers 该事件侦听器内存；ssr图形；更快的Ts全力支持；Compostion API: 女团API/转化成API；更一流的模块；自订图形API；按需校对，表面积比vue2.x更小；全力支持三根结点模块等。上面我们就来具体内容说说vue3 的缺点：

缺点1：diff演算法的强化

vue2中的交互式dom是HMPP的对照（每一结点不论写死的还是静态的单厢几层几层较为，这就节约了大部分该事件在对照静态结点上）

vue3追加了静态记号（patchflag）与那次交互式结点对照时，只对照暗含patch flag的结点（静态数据所处的结点）；可通过flag信息获知现阶段结点要对比的概要。

比如：上面的模版包涵一个div，div内包涵三个章节，当中前两个章节是静态一般来说维持不变的，而第二个章节的内容存取的msg特性，当msg改变的时候，Vue会聚合捷伊交互式DOM接着和旧的展开对照。

当快照预览时，只对静态结点部分展开diff演算，减少了资源的耗损。Patchflag是个隐式，值域为1代表者这个原素的文档是静态存取的，值域为2代表者原素的class是静态存取的。

缺点2：hoistStatic 静态提高

vue2不论原素是否参与预览，每天单厢重新建立接着再图形。

vue3对于不参与预览的原素，会做静态提高，只会被建立一次，在图形时直接复用即可。

比如：上面我们利用Vue 3 Template Explorer,来直观的感受一下：

静态提高之前

export function render(…) { return ( _openBlock(), _createBlock(div, null, [ _createVNode(div, null, 共筑1), _createVNode(div, null, 共筑2), _createVNode( div, null, _toDisplayString(_ctx.name), 1 /* TEXT */ ), ]) ) }

静态提高之后

const _hoisted_1 = /*#__PURE__*/ _createVNode( div, null, 共筑1, -1 /* HOISTED */ ) const _hoisted_2 = /*#__PURE__*/ _createVNode( div, null, 共筑2, -1 /* HOISTED */ ) export function render(…) { return ( _openBlock(), _createBlock(div, null, [ _hoisted_1, _hoisted_2, _createVNode( div, null, _toDisplayString(_ctx.name), 1 /* TEXT */ ), ]) ) }

从以上代码中我们可以看出，_hoisted_1 和_hoisted_2 两个方法被提高到了图形函数 render 之外，也就是我们说的静态提高。通过静态提高可以避免每天图形的时候都要重新建立这些对象，从而大大提高了图形效率。

缺点3：cacheHandlers 该事件侦听器内存

vue2.x中，存取该事件每天触发都要重新聚合全捷伊function去预览，cacheHandlers 是Vue3中提供的该事件内存对象，当 cacheHandlers 开启，会自动聚合一个内联函数，同时聚合一个静态结点。当该事件再次触发时，只需从内存中调用即可，无需再次预览。

默认情况下onClick会被视为静态存取，所以每天单厢追踪它的变动，但是同一个函数没必要追踪变动，直接内存起来复用即可。

比如：上面我们同样是通过Vue 3 Template Explorer，来看一下该事件监听器内存的作用：

<div> <div @click=”todo”>做点有趣的事</div> </div>

该段 html 经过校对后变成我们上面的结构(未开启该事件监听内存)：

export function render(…) { return (_openBlock(),_createBlock(div, null, [ _createVNode(div,{ onClick: _ctx.todo}, 做点有趣的事, 8 /* PROPS */, [onClick]), ]) ) }

当我们开启该事件监听器内存后：

export function render(…) { return (_openBlock(),_createBlock(div, null, [ _createVNode(div,{ onClick: //开启监听后 _cache[1] || (_cache[1] = (…args) =>_ctx.todo(…args)), },做点有趣的事), ]) ) }

我们可以对照开启该事件监听内存前后的代码，转换之后的代码, 大家可能还看不懂, 但是不要紧，我们只需要观察有没有静态记号即可，在Vue3的diff演算法中, 只有有静态记号的才会展开较为, 才会展开追踪。

缺点4：ssr图形

Vue2 中也是有 SSR 图形的，但是 Vue3 中的 SSR 图形相对于 Vue2 来说，操控性方面也有对应的提高。

当存在大量静态内容时，这些内容会被当作纯字符串推进一个 buffer 里面，即使存在静态的存取，会通过模版插值潜入进去。这样会比通过交互式 dmo 来图形的快上很多。

当静态内容大到一个量级的时候，会用_createStaticVNode 方法在客户端去聚合一个 static node，这些静态 node，会被直接 innerHtml，就不需要再建立对象，接着根据对象图形。

优点5：更快的Ts全力支持

vue2不适合使用ts，原因在于vue2的Option API风格。options是个简单对象，而ts是一种类型系统、面向对象的语法。两者有点不匹配。

在vue2结合ts的具体内容实践中，要用 vue-class-component 强化 vue 模块，让 Script 全力支持 TypeScript 装饰器，用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器，最终搞的ts的模块写法和js的模块写法差别挺大。

在vue3中，量身打造了defineComponent函数，使模块在ts下，更快的利用参数类型推断。Composition API 代码风格中，较为有代表者性的api就是 ref 和 reactive，也很好的全力支持了类型声明。

import { defineComponent, ref } from vue const Component = defineComponent({ props: { success: { type: String }, student: { type: Object as PropType<Student>, required: true } }, setup() { const year = ref(2020) const month = ref<string | number>(9) month.value = 9 // OK const result = year.value.split() }

缺点6：Compostion API: 女团API/转化成API

传统的网页是html/css/javascript（结构/样式/逻辑）分离。vue通过模块化的方式，将联系紧密的结构/样式/逻辑放在一起，有利于代码的维护。compostion api更进一步，着力于JS（逻辑）部分，将逻辑相关的代码放在一起，这样更有利于代码的维护。

在vue2的模块内使用的是Option API风格(data/methods/mounted)来组织的代码，这样会让逻辑分散，举个例子就是我们完成一个计数器功能，要在data里声明变量，在methods定义响应函数，在mounted里初始化变量，如果在一个功能较为多、代码量比非常大的模块里，你要维护这样一个功能，就需要在data/methods/mounted反复的切换到对应位置，接着展开代码的更改。

而在vue3中，使用setup函数。如下所示跟count相关的逻辑，都放到counter.js文件里，跟todo相关的逻辑放到todos.js里。

import useCounter from ./counter import useTodo from ./todos setup(){ let { val, todos, addTodo } = useTodo() let {count,add} = useCounter() return { val, todos, addTodo, count,add, }

缺点7：更一流的模块

vue2是不允许这样写的，模块必须有一个跟结点，现在可以这样写，vue将为我们建立一个交互式的Fragment结点。

<template> <div>宏碁云享专家</div> <div>全栈领域博主</div> </template>

在Suspended-component完全图形之前，备用内容会被显示出来。如果是异步模块，Suspense可以等待模块被下载，或者在设置函数中执行一些异步操作。

缺点8：自订图形API

vue2.x项目架构对于weex（移动端跨平台方案）和myvue（小程序上使用）等图形到不同平台不太友好，vue3.0面世了自订图形API解决了该问题。上面我们先看vue2和vue3的入口写法有哪些不同。

import Vue from vue import App from ./App.vue new Vue({ => h(App)}).$mount(#app)

const { createApp } from vue import App from “./src/App” createApp(App).mount((#app)

vue官方实现的 createApp 会给我们的 template 映射聚合 html 代码，但是要是你不想图形聚合到 html ，而是要图形聚合到 canvas 之类的不是html的代码的时候，那就需要用到 Custom Renderer API 来定义自己的 render 图形聚合函数了。

import { createApp } from “./runtime-render”; import App from “./src/App”; // 根模块 createApp(App).mount(#app);

使用自订图形API，如weex和myvue这类方案的问题就得到了完美解决。只需重写createApp即可。

缺点9：按需校对，表面积比vue2.x更小

框架的大小也会影响其操控性。这是 Web 应用程序的唯一关注点，因为需要即时下载资源，在浏览器解析必要的 JavaScript 之前该应用程序是不可交互的。对于单页应用程序尤其如此。尽管 Vue 一直是相对轻量级的（Vue 2 的运行时大小压缩为 23 KB）。

在 Vue 3 中，通过将大多数全局 API 和内部帮助程序移至 ES 模块导出来，实现了这一目标。这使现代的打包工具可以静态分析模块依赖性并删除未使用的导出相关的代码。模版校对器还会聚合友好的 Tree-shaking 代码，在模版中实际使用了该功能时才导入该功能的帮助程序。

框架的某些部分永远不会 Tree-shaking，因为它们对于任何类型的应用都是必不可少的。我们将这些必不可少的部分的度量标准称为基准尺寸。尽管增加了许多新功能，但 Vue 3 的基准大小压缩后约为 10 KB，还不到 Vue 2 的一半。

缺点10：全力支持三根结点模块

Vue3 一个模版不再限制有多个根结点，(多个根结点上的 Attribute 继承) 需要显式定义 attribute 应该分布在哪里。否则控制台会给出警告提示。

在 Vue 3 中，模块现在正式宣布全力支持三根结点模块，即片段！

在 2.x 中，不全力支持三根模块，当用户意外建立三根模块时会发出警告，因此，为了修复此错误，许多模块被包装在一个中。如下

在 3.x 中，模块现在可以有多个根结点！但是，这确实要求开发者明确定义特性应该分布在哪里。

结尾想说的

Vue是国内最火的前端框架之一。操控性提高，运行速度是vue2的1.2-2倍。

表面积更小，按需校对表面积vue2要更小。类型推断，更快的全力支持ts这个也是趋势。高级给予，暴露了更底层的API和提供更一流的内置模块。女团API，能够更快的组织逻辑，封装逻辑，复用逻辑

对未来的展望：

技术总是越新越好，越来越多的企业都升级了vue3；

大型项目，由于对TS的友好越来越多的大型项目可以使用vue3；

作为程序员，我们就应该适应市场，提高自己的竞争力，为加薪提供空间。

点击关注，第一时间了解宏碁云新鲜技术~