浅析vue3相对于vue2的变化
2024-12-09 11:13:16

vue3与vue2的区别算是较为火热的面试题之一了,之前早就想整理一遍了,但是奈何没有太多时间去关注。

在两者的深度上,我个人一直觉得自己了解的较少,了解的越深就越不敢说自己深入了解。

经过两个月左右的整理,我应该可以勉强说自己算是略懂了。

这里放上自己的拙见,我尽可能的确认了自己理解的准确性,不过我仍然感觉自己似乎做的不到位,这就当是抛砖引玉,希望大家在评论区多多拍砖。

正文

这段时间看了很多相关的文档,自己也翻了很多遍vue3的官网文档,同时自己也在项目中重新按照自己的经验重新用了一遍Vue3的新写法。

在一段时间的使用之后,个人认为,Vue3与Vue2的区别,要从使用者和开发者的角度来看。

使用者

使用者,就是我们平时写业务的这些普通开发者。

大多数情况下,使用者不负责源码开发,仅仅只要知道有个新特性,然后按照新特性使用就行了。

就像是伐木工学会了用A型号的电锯,这时候电锯做了个升级,加入了一些特性,而我们只要知道如何用好这些新特性。

相对于Vue2,我认为Vue3的新特性如下。

  • 取消了根元素,每个组件不必再必须嵌套一个根元素标签了
  • 响应式用法的改变,用reactive和ref取代了之前的data声明的变量的方式
  • 新增了组合式写法,相对于传统的选项式更灵活,可读性更高,这种写法也支持
  • 父子组件传参方式发生了些许改变,不过用法大致和Vue2的思路没差,definePropsdefineEmitsdefineExpose这三个稍微看看用法就能很快上手
  • 生命周期的写法和名称有些许改变,新增了setup,但是大致流程没有变化
  • v-if和v-for的优先级调整,以v-if的优先级更高,如果二者要在同一标签内使用,将v-for放在外边,不然v-if会直接覆盖掉v-for的效果
  • 修饰符发生了一些改变,取消了.native,不过总的来说没有太大变化

总之,Vue3相对于Vue2,虽然很多人说是有些破坏式更新,写法发生了巨大的改变,这是一次失败的更新。

但从使用者的角度来讲,我个人认为,这次更新并不算是一次破坏式更新,至少大部分写法和习惯都是保留好了。

这里浅谈一下争论最大的选项式与组合式。

选项式?

选项式就是V2的写法,选项式上手简单,且不容易出岔子,有这个基础架子的保证,新手只要不是特别离谱,写出来的代码至少具有一定的可读性。

但这种写法在代码量上去之后,可读性就会变得差。

主要原因就是变量和函数分开,不同块的变量混合在一起,每次翻阅代码的时候就要上下翻看,要么就要拆开面板去分开看,很麻烦。

而且,所有的变量都是在data中申明,全部指向了this。

指向this固然好用,但是随着后续模块的增多,这些this声明出来的变量会让人不知道这到底是哪个模块的内容,容易造成混乱。

而组合式确实解决了这个痛点。

组合式?

组合式写法其实就是回归了传统的script标签写法,声明了变量,然后按照传统的JS写法继续做就可以。

相对于V2的写法,V3的写法太过自由,可能很多人第一时间拿到手之后会有些不知所措。

不过经过几个项目铺垫之后,大概就能明白组合式的优势了。

组合式相对于选项式,可以更模块化的拆业务,通过reactive包裹不同的代码块之后,我们能够更有逻辑的去切割页面上的逻辑块。

在完成页面的代码块的切分之后,不同变量不会再全部指到this了,这样让我们更清楚这些变量是负责哪个代码块的。

这就是组合式,更模块化,更容易排查,更好的代码可读性。

hooks?minxin?

随着代码量的增加,还可以将多个页面的重复业务块拆出来,放入hooks中供全局使用(Vue2中也有minxin),但是二者实际使用后,就能明白二者的不同。

  • hooks像是以前抽离出来的公用方法,抽离的是逻辑,我们将一段公用的逻辑方法封入Hooks中,这里可以封入一定的业务逻辑
  • minxin更像是抽离出一部分公用模板,抽离的是模板,我们将一些写烦了的公用方法封入minxin中,省的每次都写。

当然,我这个说法还是有点怪,实际开发中,这二者的用法硬要用的话,可混为一谈的。

不过,我个人依旧推荐大家用hooks去封装逻辑,不要用来封装模板。

开发者

开发者,就是指Vue框架的源码开发者。

源码开发者,大家平时其实很少接触到,不过部分使用者在常规业务开发到极度深入的时候,肯定会去了解相关内容。

尽管我们不去开发,但是用久了,肯定多少会要了解一些的。

相对于Vue2,Vue3在源码层面的特性变动如下

通过这些,开发者做到让Vue3具有了哪些优势呢?

更好的 TypeScript 支持

  • Vue 3 的代码库已经全面采用 TypeScript 重写,提供了更好的类型推断和类型提示。
  • 提供了更多的内置类型声明,使得开发时更容易发现代码错误和调试。

更好的响应式系统

  • Vue 3 使用了 Proxy 来重写响应式系统,相比 Vue 2 的 Object.defineProperty,更加直观和强大。
  • 在 Vue 3 中,可以在更深的层次上追踪响应式变量的变化,使得开发者能够更准确地监听数据变化。

更灵活的组合式 API

  • Vue 3 引入了组合式 API,使得组件的逻辑可以更好地组织和复用。
  • 组合式 API 提供了更直观、更灵活的方式来组织组件代码,使得代码更易读、易维护。

更快的渲染性能

  • Vue3 相比 Vue2 来说,Vue3 重写了虚拟 Dom 实现,编译模板的优化,更高效的组件初始化。

更小的体积

  • Vue 3 的运行时核心相比 Vue 2 更小,这意味着更小的打包体积,减少了前端加载时间。
  • Tree-shaking 支持:Vue 3 代码更容易被 Tree-shaking 优化,因此可以更好地剔除不需要的代码。

结语

个人虽然是个vue老登了,但是在很多时候都是在自我学习,所以我整理的这些内容实在是过于浅薄,并未深入,让大家见笑了。

关于Vue2与Vue3的选择,我个人并不排斥任何一种选择,这需要我们根据实际情况来进行选择,很多老项目如果能不动,最好还是别动。

当然,从长远的角度来讲,我还是期望用Vue3的,毕竟Vue2已经停止了更新,而Vue3继承了2的特性,并且还在持续更新,显然Vue3更有潜力。

而且,社区内似乎有不少人开始追随Vue3的更新,同时也出现了VueUse这种社区好物。

长远的来看,显然是Vue3的社区会更壮大。

这种不错的未来前景,是最值得追逐技术的理由之一。

参考

vue3和vue2的区别,你知道多少 - 掘金 (juejin.cn)

vue3保姆级教程

前端 - Vue2、Vue3的diff对比 - 哈啰技术 - SegmentFault 思否