vue2 和vue3,vue2和3区别

　　Vue3解决了vue2的一些缺陷和不足，学习新技术是很有必要的。本文总结了vue3的一些优点，希望你能早日使用vue3。

1.为什么要有vue3

　　我们在使用vue2的时候，经常会遇到一些不好的体验，比如：

　　随着功能和需求的增加，复杂组件的代码越来越难维护，逻辑混乱。虽然vue2也有一些复用方法，但是也有一些弊端。比如我们经常使用的Mixin，就特别容易出现命名冲突。暴露的变量意图不明显，复用到其他组件时容易冲突。

　　Vue2对typeScript的支持非常有限，没有考虑ts的集成。

　　vue3的出现就是为了解决vue2的弊端，它的组合API很好的解决了逻辑复用的问题。而且vue3的源代码是用ts写的，非常支持ts。我们可以在开发项目的过程中使用ts的加持，让代码更加健壮。

2.vue3的优点

　　Vue3支持vue2的大部分功能，并与vue2兼容。

　　与vue2相比，vue3有明显的性能提升。

　　封装尺寸缩小41%

　　初始渲染速度快55%，更新速度快133%。

　　内存使用减少了54%

　　Vue3有组合API，实现逻辑模块化和重用。

　　增加了新的特性，比如传送组件，全局API的修改和优化等。

3.响应式原理的不同

　　Vue2.x实现了双向数据绑定的原理，通过es5的Object.defineProperty根据具体的key进行读取和修改。其中setter方法用于劫持数据，getter用于修改数据。但是你必须先知道你要拦截和修改的键是什么，所以vue2对新增的属性无能为力，比如无法监控属性的添加和删除，数组索引和长度的变化。vue2的解决方案是使用vue.set (object，property name，value)等方法向嵌套对象添加响应。

　　Vue3.x使用的是ES2015更快的原生代理，而不是Object.defineProperty，代理可以理解为在对象前面设置了一层“拦截”，所有外部对对象的访问都要先经过这层拦截，所以它提供了一种过滤和重写外部访问的机制。代理可以直接监听对象而不是属性，并返回一个新的对象，具有更好的响应支持。

4.生命周期的不同

　　之前-请使用设置()

　　已创建-请使用安装程序()

　　装载前-装载前

　　安装的

　　更新前- onBeforeUpdate

　　更新-未更新

　　销毁前- onBeforeUnmount

　　已销毁-未安装

　　错误捕获-一个错误捕获

　　如果要在页面中使用生命周期函数，过去vue2直接在页面中写生命周期，而vue3需要引用，这也是VUE 3能够将代码压缩到较低层次的原因。

5.默认项目目录结构的不同

　　Vue3删除了配置文件目录、config和build文件夹，删除了静态文件夹，添加了public文件夹，将index.html移动到public，在src文件夹中添加views文件夹，对视图组件和公共组件进行分类。

6.vue3对全局API的优化

　　在Vue3中，全局和内部API都进行了重构，并且考虑到了对摇树的支持。因此，全局API现在只能作为由ES模块构建的命名导出来访问。

　　从“vue”导入{ nextTick }

　　nextTick(()={

　　//与DOM相关的东西

　　})

　　入口文件

　　//vue2写入

　　//修改Vue2全局配置会修改Vue对象的属性。

　　//在不同的app中共享一个配置不同的Vue对象也是非常困难的。

　　从“vue”导入Vue

　　从导入应用程序。/App.vue

　　Vue.config.xx=xx

　　Vue.use(.)

　　Vue.mixin(.)

　　新Vue({

　　render:h=h(app)

　　}).$ mount(“# app”)

　　//vue3写入

　　从“vue”导入{ createApp }

　　从导入应用程序。/App.vue

　　Const app=createApp(APP) //创建应用程序实例

　　App.config.xx=xx //修改实例上的配置而不发生冲突。

　　app.use(.)

　　app.mixin(.)

　　app . mount(# app)

7.使用Proxy替代了defineProperty

　　代理相对于定义属性的优势

　　Object.defineProperty()有三个主要问题：

　　无法侦听数组更改。

　　必须遍历对象的每个属性。

　　您必须深入遍历嵌套对象。

　　ES2015的规范中正式加入了代理，它具有以下特点：

　　对于对象：对于整个对象，而不是对象的一个属性，所以不需要遍历键。这解决了上述Object.defineProperty()第二个问题

　　支持数组：代理不需要重载数组方法，省去了很多hack。减少代码量就相当于减少了维护成本，标准的最好。

　　除了以上两点，代理还有以下优点：

　　Proxy的第二个参数有13种拦截方法，比Object.defineProperty()更丰富。

　　代理作为一种新的标准，已经引起了浏览器厂商的关注，其性能也得到了优化。相比之下，Object.defineProperty()是一个旧方法。

8.更多资料

　　Vue3源代码

　　Vue3官网

　　以上是Vue3相对于Vue2优势的详细总结。更多关于Vue3相比Vue2的优势，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录