vue2和vue3哪个好（vue2 和vue3）

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

vue3 正式发布有两年多了，之前也做过一些学习和研究。vue3 发布后给某培训机构开发了一套vue3课程课件，自己也开源了一套基于vue3的后台管理系统（因为个人懒的原因，半年后才上传到gitHub，且到目前为止一直没有更新过）。

附上网址：https://github.com/gegestst112/vue-stick-admin，有兴趣的可以下载看一下，希望我之后会继续完善和更新。

虽然现在还有很多用vue2的项目，甚至有新启动的项目还基于vue2。但vue3作为 vue 的主流开发技术栈，仍然是必然的趋势。因为现在 vue 官网文档也是 vue3 的版本了，指不定哪天要找 vue2 的文档都要花点功夫了。

近期整理一下 vue2 和 vue3 的不同点，希望对读到这篇文章的小伙伴从vue2过渡到vue3有些许帮助。

先来看下 vue2 和 vue3 有哪些相同点，至少先知道技术升级到 vue3 没有看起来那么难。

总结一下，即使不使用 vue3 新增的那些特性，也还是可以完成日常开发工作的。

不过，如果项目是使用 vue3 技术栈开发的，应该大部分人都会尝试适应vue3 组合式 api 语法。如果其他同事开发的模块用的都是组合式 api，唯独你还是用选项式 api，多少会有些违和感的。接下来看看 vue3 新增了哪些新特性

一、创建实例的方式不同

vue2 使用 new Vue({ …选项 }) 构造函数的方式创建；

vue3 通过内置的 createApp( //根组件 ) 方法创建。

二、Vue3 新增的片断特性，允许单文件组件中的 template 元素下可以有多个节点

在 Vue 2 中的组件中的顶层 <template> 块不支持多个节点，通常都是用一个 div 元素包含所有节点或组件，如：

影响虽然不大，但最终生成的页面中会有很多不必要的节点嵌套，有经验的前端开发工程师应该都深有体会，特别是有强迫症会更觉得难受。

在Vue 3 中解决了这个问题，组件中可以包含多个节点，如下所示：

现在这样写的组件，当组件嵌套很多级的时候，可以节省很多嵌套的节点。不过记得显示定义 attribute 分布的位置。

三、vue3的响应式原理实现不一样

vue2的双向数据绑定是使用 Object.definepropert() 对数据进行劫持，结合发布订阅模式实现。

vue3中使用了es6的proxyAPI对数据进行处理。

使用proxy 可以劫持整个data对象，然后递归返回属性的值的代理即可实现响应式。

四、新增了一些组件

比如 <teleport> 内置组件可以将内容挂载到指定的目标元素。

五、删除了过滤器

在 vue2 中过滤器就用得很少了，我只在 vue1 的时候用得比较多。对于习惯用过滤器的开发者可能有少许影响。

六、新增和修改了生命周期钩子函数

比如 destroyed 生命周期钩子被重命名为 unmounted；

新增了 renderTracked、serverPrefetch 等钩子函数；

在组合式 api 中不同的调用方式。

七、组合式 API

组合式 API 是 vue3 最大的一个变化，也是很多熟悉 vue2 的开发者最需要适应的方法。

可以在单文件组件中使用组合式 API 的编译时语法糖 <script setup>，有使代码更简洁、更好的运行时性能、能够使用纯 TypeScript 声明 props 和自定义事件等优势；
不能在 setup 中使用 this 返回 vue 实例对象
生命周期钩子函数名称前加了 on
传参 props 和事件 emit 有不同的调用方式
计算属性 computed 和监听器 watch 使用方式不同
新增大量的响应式 api，合理地运用这些 api 操作数据，并可使页面响应数据变化。

八、支持 typescript 开发语法

多了一种开发方式，有利于团队合作、使代码更规范和严谨；对于习惯 javascript 松散语法的开发者来说，可能不太喜欢这种开发方式