vue3和vue2的区别

一、Vue3介绍

Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了

在更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」

简要就是：

• 利用新的语言特性(es6)
• 解决架构问题

哪些变化

 

 

从上图中，我们可以概览Vue3的新特性，如下：

• 速度更快
• 体积减少
• 更易维护
• 更接近原生
• 更易使用

1、速度更快

vue3相比vue2

• 重写了虚拟Dom实现

• 编译模板的优化

• 更高效的组件初始化

• undate性能提高1.3~2倍

• SSR速度提高了2~3倍

 

 2、体积更小

通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的

能够tree-shaking，有两大好处：

• 对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大

• 对使用者，打包出来的包体积变小了

vue可以开发出更多其他的功能，而不必担忧vue打包出来的整体体积过多

 

 3、更易维护

compositon Api

• 可与现有的options API一起使用
• 灵活的逻辑组合与复用
• Vue3模块可以和其他框架搭配使用

更好的Typescript支持

VUE3是基于typescipt编写的，可以享受到自动的类型定义提示

 

 

编译器重写

 

 4、更易使用

响应式 Api 暴露出来

 

 

 轻松识别组件重新渲染原因

 

 二、Vue3新增特性

Vue 3 中需要关注的一些新功能包括：

• framents
• Teleport
• composition Api
• createRenderer

1、framents

在 Vue3.x 中，组件现在支持有多个根节点

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>