导语：Vue3和Vue2的区别

Vue3的重构背景：

1、利用新的语言特性（es6）

2、解决架构问题

新特性：

1、速度更快

重写了虚拟Dom的视线

编译模板的优化

更高效的组件初始化

update性能提升1.3~2倍

SSR速度提高了2~3倍

2、体积更小

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

3、更易维护

Composition API可与现有的Options API一起使用

灵活的逻辑组合与复用

Vue3模块可与其他框架搭配使用

4、更接近原生

自定义渲染API

5、更易使用

响应式API暴露出来

新功能：

1、framents

2、Teleport

3、composition Api

4、createRenderer

非兼容变更：

Global API：

1、全局Vue API 已变更为应用程序实例

2、全局和内部API已经重构为可tree-shakable

模板指令：

1、组件上 v-modal 用法已更改

2、<template v-for>和非 v-for节点上key用法已变更

3、在同一元素上使用的v-if 和v-for 优先级已变更

4、v-bind=“object” 现在排序敏感

5、v-for 中的 ref 不再注册 ref 数组

组件：

1、只能使用普通函数创建功能组件

2、functional 属性在单文件组件（SFC）

3、异步组件现在需要 defineAsyncComponent 方法来创建

渲染函数：

1、渲染函数 API 改变

2、$scopedSlots property 已删除，所有插槽都通过 $slots 作为函数暴露

3、自定义指令 API 已更改为与组件生命周期一致

4、一些转换 class 被重命名了：v-enter -> v-enter-from、v-leave -> v-leave-from

5、组件 watch 选项和实例方法 $watch 不再支持点分隔字符串路径，请改用计算函数作为参数

6、在Vue2.x中，应用跟容器的outerHTML将替换为根组件模板（如果根组件没有模板/渲染选项，则最终编译为模板）。Vue3.x 现在使用应用程序容器的innerHTML。

其他小改变：

1、destroyed生命周期选项被重命名为unmounted

2、beforeDestroy生命周期选项被重命名为beforeUnmount

3、prop default 不再有权限访问this上下文

4、自定义指令api已更改为与组件生命周期一致

5、data应始终声明为函数

6、来自mixin的data选项现在可以简单的合并

7、attribute强制策略已更改

8、一些过渡的class被重命名

9、组件watch选项和实例方法$watch不再支持以点分隔的字符串路径。改用计算属性函数作为参数

10、<template>没有特殊指令的标记（v-if、v-else、v-for、v-slot）现在被视为普通元素，并将生成原生的<template>元素，而不是渲染其内部内容。

移除API

1、keyCode支持作为v-on的修饰符

2、$on、$off和$once实例方法

3、过滤filter

4、内联模板attribute

5、$destroy实例方法。用户不应再手动管理单个Vue组件的生命周期

本文内容由小春整理编辑！