2025年vue2与vue3哪个用的多（vue3和2区别）

科技前沿 • 2025-05-16 22:20 • 阅读 51

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p>从Vue3发布以来，我就一直对其非常感兴趣，就一直想着将其投入公司的生产中，但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试；慢慢的发现组合式Api的形式非常适合开发（个人感觉），尤其是Vue3.2推出了setup语法糖后直呼真香。后面公司的新项目几乎全部采用了Vue3了。使用Vue3开发也将近大半年了，所以写了这篇文章对Vue2和Vue3做了一个对比总结，一是为了对这段时间使用Vue3开发做些记录，二是为了帮助更多的小伙伴更快的上手Vue3。</p>

讯享网

本篇文章主要采用选项式Api，组合式Api，setup语法糖实现它们直接的差异

首先实现一个同样的逻辑(点击切换页面数据)看一下它们直接的区别

选项式Api

讯享网

组合式Api

setup 语法糖

讯享网

总结：

选项式Api是将data和methods包括后面的watch，computed等分开管理，而组合式Api则是将相关逻辑放到了一起（类似于原生js开发）。

setup语法糖则可以让变量方法不用再写return，后面的组件甚至是自定义指令也可以在我们的template中自动获得。

我们都知道在选项式api中，data函数中的数据都具有响应式，页面会随着data中的数据变化而变化，而组合式api中不存在data函数该如何呢？所以为了解决这个问题Vue3引入了ref和reactive函数来将使得变量成为响应式的数据

组合式Api

setup语法糖

讯享网

总结：

使用ref的时候在js中取值的时候需要加上.value。

讯享网

reactive更推荐去定义复杂的数据类型 ref 更推荐定义基本类型

下表包含：Vue2和Vue3生命周期的差异

Vue2(选项式API) Vue3(setup) 描述 beforeCreate - 实例创建前 created - 实例创建后 beforeMount onBeforeMount DOM挂载前调用 mounted onMounted DOM挂载完成调用 beforeUpdate onBeforeUpdate 数据更新之前被调用 updated onUpdated 数据更新之后被调用 beforeDestroy onBeforeUnmount 组件销毁前调用 destroyed onUnmounted 组件销毁完成调用

举个常用的onMounted的例子

选项式Api

组合式Api

讯享网

setup语法糖

从上面可以看出Vue3中的组合式API采用hook函数引入生命周期；其实不止生命周期采用hook函数引入，像watch、computed、路由守卫等都是采用hook函数实现

总结

Vue3中的生命周期相对于Vue2做了一些调整，命名上发生了一些变化并且移除了beforeCreate和created，因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不再需要它们。

生命周期采用hook函数引入

选项式API

讯享网

组合式Api

setup语法糖

讯享网

2025年vue2与vue3哪个用的多（vue3和2区别）

相关推荐