vue3.0与vue2.0的区别简记（基于官方文档）

最新推荐文章于 2024-09-30 12:30:10 发布

start_sea

最新推荐文章于 2024-09-30 12:30:10 发布

阅读量2.2k

点赞数 1

文章标签： javascript 前端 vue.js npm

本文链接：https://blog.csdn.net/start_sea/article/details/130985763

版权

文章对比了Vue3.0和Vue2.0的官方文档，强调了3.0版本的进步，如UI改进和内容查找的便利性。Vue3.0引入了setup()钩子和组合式API，提供了选项式和组合式两种API风格。作者建议根据个人喜好选择API，并提醒读者注意Vue2的维护时间，建议尽早升级到Vue3.

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

vue3.0与vue2.0的区别简记（基于官方文档）

基于vue3.0和vue2.0官方文档简单记录vue3.0版本和2.0版本的区别。

一直没有看文档的习惯（就是不爱学习，现在吃了没文化的亏），遇到问题才去补充点食粮，痛定思痛，摸鱼的时候跑去翻了一下文档。果然，官方文档这玩意就该多研究研究，即使是自己很熟悉的知识点，得到官网文档印证也能加强记忆。（可以说我读死书，就知道照着书本文档，没有独立思考，没有思维突破，没有突破框架局限啥的都行，那没办法，咱就这水平，咱得认，一步一步走就行。）

有点扯远了，言归正传…

二话不说，先贴个地址：

vue3.0文档-主页：https://cn.vuejs.org/
3.0文档-文档（快速上手）：https://cn.vuejs.org/guide/quick-start.html
3.0文档-API：https://cn.vuejs.org/api/

vue2.0文档-主页： https://v2.cn.vuejs.org/
2.0文档-文档（教程）： https://v2.cn.vuejs.org/v2/guide/
2.0文档-API： https://v2.cn.vuejs.org/v2/api/

相比于2.0版本的官网文档，3.0版本的官方文档，进步相当大。界面UI看着更好看舒服自不用说，在菜单方面做了调整，常用的内容更加方便寻找。

如图：
3.0的API界面：
在这里插入图片描述
2.0的API界面：

vue的3.0版本和2.0版本相比在语法上调整，最明显的就是新增了setup()钩子函数，专门用于专门用于组合式 API。可能就有小伙伴问到什么是组合式API，在vue3.0文档-简介部分有详细介绍。在vue3.0版本中，官方提供介绍了选项式API和组合式API两套风格不同的接口，详情请看官方文档（~~）

至于选哪一种好：看你自己，选哪种舒服就选哪种（~~）官方也是这么说（狗头保命。。。）

两种不同风格的API接口，在3.0版本的文档上也有了明显的表现（直接提供选项切换两种不同风格，简单方便）：
在这里插入图片描述
使最新版本的vue.js创建一个vue项目：
填写项目名称，选择各项设置之后创建完成。项目创建完成之后我们可以看到Now run 提示，按照这个指令提示去执行就可以将我们这个新创建的i项目运行起来，非常方便快捷。

（提示：这里的例子是是用pnpm创建项目，而不是npm。这里选择同时创建Router路由模块，创建完成之后，默认的router文件里面选择的路由模式是history模式，关于hash模式和history模式的区别这里就不多做解释。新版本的vue创建项目是使用vite配合进行构建的，因此创建完成之后生成的配置文件是vite.config.js，而不是我们之前常用的vue.config.js或者webpack.config.js。当然，这个可以自己手动改。）

在这里插入图片描述
项目创建成功之后的文件结构：
生成的文件结构

提示：（这个很重要！很重要！很重要！）

不少道友可能会对3.0的语法不太习惯，更喜欢2.0版本的风格。但是在3.0版本的文档简介中，官方已经特别贴出了vue2的停止维护时间，到时候虽然说vue2不至于不能使用，但是早点更新换代，换上vue3才是上上之选。（那些要换React、Angular的当我没说，爱去哪去哪。）
在这里插入图片描述
end