vue3和vue2 的区别，vue3和vu2到底哪个好呢？

最新推荐文章于 2024-10-06 11:16:09 发布

蔣伟平

最新推荐文章于 2024-10-06 11:16:09 发布

阅读量668

点赞数

分类专栏： vue 教程文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gegestst112/article/details/128007735

版权

vue 教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue3发布已超过两年，其带来的新特性包括使用createApp创建实例、支持片断特性减少不必要的DOM嵌套、采用Proxy实现响应式原理、新增 teleport 组件、移除过滤器、调整生命周期钩子和引入组合式API。开发者需要适应如组合式API这样的重大变化，同时Vue3对TypeScript的支持也提供了更规范的开发体验。

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

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 中还是可以使用选项式 api的写法，我们熟悉的data、props、computed、methods、watch、mixins 这些选项都还在；
created、mounted 等生命周期钩子函数也还是熟悉的味道；
模板语法基本上一致，我们还是可以用 v-bind 绑定数据，v-on 绑定事件，v-if 和 v-for 渲染元素等等；

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

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

一、创建实例的方式不同

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

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

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

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

      <template>
        <div>
          <div class=”top”>…</div>
          <header>...</header>
          <main>...</main>
          <footer>...</footer>
        </div>
      </template>

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

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

      <template>
        <header>...</header>
        <main v-bind="$attrs">...</main>
        <footer>...</footer>
      </template>

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

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

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

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

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

四、新增了一些组件

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

五、删除了过滤器

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

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

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

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

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

七、组合式 API

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

可以在单文件组件中使用组合式 API 的编译时语法糖

八、支持 typescript 开发语法

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