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

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

如果对你有帮助,记得点赞噢(~~)

猜你喜欢

转载自blog.csdn.net/start_sea/article/details/130985763