（建议收藏）Vue3 对比 Vue2.x 差异性、注意点、整体梳理，与React hook比又如何？（面试热点）

最新推荐文章于 2024-08-10 17:22:56 发布

@baby张

最新推荐文章于 2024-08-10 17:22:56 发布

阅读量1.1k

点赞数 8

分类专栏： VUE技术栈 React技术栈

本文链接：https://blog.csdn.net/weixin_43648947/article/details/109490391

版权

本文详述Vue3的重写原因，对比Vue2.x的生命周期、Proxy与defineProperty、Diff算法优化、TypeScript支持、打包体积变化及组件Api等差异。同时，探讨Vue3的setup与React Hooks的异同，分析Vue3在性能和易用性上的提升，适合开发者了解Vue3的最新进展和面试热点。

摘要由CSDN通过智能技术生成

前言

前不久Vue3的RC版本终于发布，一直没时间研究，这篇文章我将以下面的结构，为大家整体梳理下Vue3，顺便对比下vue2.x和react hook结合着带大家看看，可能有些长，耐心看完相信会有收获（面试热点）。
在这里插入图片描述

一、为什么重写vue2.X?

提示：首先我们先了解下，是什么让尤雨溪决定重写vue，这将也是Vue2.x与Vue3的差异性对比，vue的一次重大升级。（面试热点）
后续敬请期待，Vue2.x源码解析,努力码字中。。。

1.1背景

如今的前端Vue - React - Angular三足鼎立，彼此之间相互牵制，可谓明争暗斗多年，自古以来落后就要挨打，如今Vue就是意识到了自己的不足，在寻找突破和提升，那么究竟那些不足呢？相信大家使用时候也多多少少感觉到了，后面将细细说明。
当前github 上三大框架的star情况， vue-175K ， react -159k ， angular- 67.3k

1.2尤雨溪的回答是两个关键因素：

1.主流浏览器对新的JavaScript语言特性的普遍支持。
2.当前Vue代码库随着时间的推移而暴露出来的设计和体系架构问题。
提示：具体那里不足会在下面vue2和vue3对比时候说明

二、Vue2.x 到 Vue3 详细对比

2.1 生命周期的变化

Vue2.x	Vue3
beforeCreate	使用 setup()
created	使用 setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

整体来看其实变化不大，使用setup代替了之前的beforeCreate和created，其他生命周期名字有些变化，功能都是没有变化的

2.2- 使用proxy代替defineProperty

熟悉vue的朋友都知道，vue2.x双向绑定的核心是Object.defineProperty()，那为什么要换掉呢，我们看看他们的语法就知道了。

2.2.1- Object.defineProperty()语法

重点：vue为什么对数组对象的深层监听无法实现，因为组件每次渲染都是将data里的数据通过defineProperty双向绑定上，之前没有后加的属性是不会被绑定上，也就不会触发更新渲染

Object.defineProperty( Obj, 'name', {
   
    enumerable: true, //可枚举
    configurable: true, //可配置
    // writable:true, //跟可配置不能同时存在
    // value:'name',  //可写死直
    get: function () {
   
        return def
    },
    set: function ( val ) {
   
        def = val
    }
} )

2.2.2- Proxy的语法

//两个参数，对象，13个配置项
const handler = {
   
    get: function(obj, prop) {
   
        return prop in obj ? obj[prop] : 37;
    },
    set:function(){
    },
    ...13个配置项
};
const p = new Proxy({
   }, handler);
p.a = 1;
p.b = undefined;
console.log(p.a, p.b);      // 1, undefined
console.log('c' in p, p.c); // false, 37

对比了上面两种语法是不是就懂了，defineProperty只能绑定首次渲染时候的属性，Proxy需要的是整体，不需要关心里面有什么属性，而且Proxy的配置项有13种，可以做更细致的事情，这是之前的defineProperty无法达到的

2.2.3- 两者兼容性

1.vue2.x之所以只能兼容到IE8就是因为defineProperty无法兼容IE8,其他浏览器也会存在轻微兼容问题
2.proxy的话除了IE，其他浏览器都兼容，这次vue3还是使用了它，说明vue3直接放弃了IE的兼容考虑，个人感觉已经没人用IE了

2.3- Diff算法的提升

2.3.1- 以往的渲染策略

vue2.x提供类似于HTML的模板语法，但是，它是将模板编译成渲染函数来返回虚拟DOM树。Vue框架通过递归遍历两个虚拟DOM树，并比较每个节点上的每个属性，来确定实际DOM的哪些部分需要更新。

2.3.2- 潜在的问题

由于现代JavaScript引擎执行的高级优化，这种有点暴力的算法通常非常快速，但是DOM的更新仍然涉及许多不必要的CPU工作，那么如何解决呢？

2.3.3- Vue3的突破

引用尤雨溪：
为了实现这一点，编译器和运行时需要协同工作：编译器分析模板并生成带有优化提示的代码，而运行时尽可能获取提示并采用快速路径。这里有三个主要的优化：

首先，在DOM树级别。我们注意到，在没有动态改变节点结构的模板指令（例如v-if和v-for）的情况下，节点结构保持完全静态。如果我们将一个模板分成由这些结构指令分隔的嵌套“块”，则每个块中的节点结构将再次完全静态。当我们更新块中的节点时，我们不再需要递归遍历DOM树 - 该块内的动态绑定可以在一个平面数组中跟踪。这种优化通过将需要执行的树遍历量减少一个数量级来规避虚拟DOM的大部分开销。
其次，编译器积极地检测模板中的静态节点、子树甚至数据对象，并在生成的代码中将它们提升到渲染函数之外。这样可以避免在每次渲染时重新创建这些对象，从而大大提高内存使用率并减少垃圾回收的频率。
第三，在元素级别。编译器还根据需要执行的更新类型，为每个具有动态绑定的元素生成一个优化标志。例如，具有动态类绑定和许多静态属性的元素将收到一个标志，提示只需要进行类检查。运行时将获取这些提示并采用专用的快速路径。
综合起来，这些技术大大改进了我们的渲染更新基准，Vue 3有时占用的CPU时间不到Vue 2的十分之一。

2.4- typeScript的支持

2.4.1- 存在的问题

vue2.x中使用的都是js，并没有类型系统这个概念，现如今typescript异常火爆，它的崛起是有原因的，因为对于规模很大的项目，没有类型声明，后期维护和代码的阅读都是头疼的事情，所以广大码农迫切的需要vue能完美支持ts。

2.4.2- 如何实现

最终vue3 借鉴了react hook实现了更自由的编程方式，提出了Composition API，Composition API不需要通过指定一长串选项来定义组件，而是允许用户像编写函数一样自由地表达、组合和重用有状态的组件逻辑，同时提供出色的TypeScript支持。

2.5- 打包体积变化

2.5.1- 以前打包存在的问题

vue2官方说的运行时打包师23k，但这只是没安装依赖的时候，随着依赖包和框架特性的增多，有时候不必要的，未使用的代码文件都被打包了进去，所以后期项目大了，打包文件会特别多还很大。

2.5.2- vue3是怎么做的

引用尤雨溪：

在Vue 3中，我们通过将大多数全局API和内部帮助程序移动到Javascript的module.exports属性上实现这一点。这允许现代模式下的module bundler能够静态地分析模块依赖关系，并删除与未使用的module.exports属性相关的代码。模板编译器还生成了对树抖动友好的代码，只有在模板中实际使用某个特性时，该代码才导入该特性的帮助程序。
尽管增加了许多新特性，但Vue 3被压缩后的基线大小约为10 KB，不到Vue 2的一半。