A brief summary of the differences between vue3.0 and vue2.0 (based on official documents)

A brief summary of the differences between vue3.0 and vue2.0 (based on official documents)

Based on the official documents of vue3.0 and vue2.0, the difference between vue3.0 version and 2.0 version is simply recorded.

I have never been in the habit of reading documents (I just don’t like learning, and now I suffer from the disadvantage of being uneducated). When I encounter problems, I just go to supplement some food. I learned from the experience and went to read the documents when I was fishing. Sure enough, you should study more about official documents. Even knowledge points that you are familiar with can be strengthened by being confirmed by official documents. (It can be said that I am a rote reader. I only know how to follow books and documents without independent thinking, breakthrough thinking, or breaking through the limitations of the framework. There is nothing I can do. We are at this level. We have to recognize it and just go step by step. )

It's a bit of a tangent, let's get back to the point...

Without further ado, let me post the address first:

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看着更好看舒服自不用说,在菜单方面做了调整,常用的内容更加方便寻找。

As shown in the figure:
3.0 API interface:
Insert image description here
2.0 API interface:
Insert image description here

Compared with version 2.0, vue version 3.0 has been adjusted in syntax. The most obvious one is the addition of the setup() hook function, which is specially used for combined APIs. Some friends may have asked what is a combined API, which is described in detail in the vue3.0 document-introduction section. In the vue3.0 version, the official provides and introduces two sets of interfaces with different styles: optional API and combined API. For details, please see the official documentation (~~)

As for which one is better to choose: it depends on you, choose whichever is more comfortable (~~) The official also says the same (dog head saves life...)

Two different styles of API interfaces are also clearly reflected in the 3.0 version of the document (directly providing options to switch between two different styles, simple and convenient): Use the
Insert image description here
Insert image description herelatest version of vue.js to create a vue project:
fill in the project name and select All settings are then created. After the project is created, we can see the Now run prompt. Follow this instruction prompt to run our newly created i project, which is very convenient and fast.

(Tip: The example here is to use pnpm to create the project, not npm. Here you choose to create the Router routing module at the same time. After the creation is completed, the routing mode selected in the default router file is history mode. Regarding the difference between hash mode and history mode There will be no further explanation here. The new version of Vue creation project is built using Vite, so the configuration file generated after the creation is completed is vite.config.js, not the vue.config.js or webpack we commonly used before. config.js. Of course, you can change this manually.)

Insert image description here
The file structure after the project is successfully created:
Generated file structure

Tip: (This is very important! Very important! Very important!)

Many Taoists may not be used to the syntax of version 3.0 and prefer the style of version 2.0. However, in the document introduction of version 3.0, the official has specifically posted the maintenance stop time of vue2. Although vue2 will not be unusable by then, it is better to update it early and replace it with vue3. (Those who want to switch to React or Angular, just pretend I didn’t say anything and just go wherever you like.)
Insert image description here
end

If it is helpful to you, please remember to like it (~~)

Guess you like

Origin blog.csdn.net/start_sea/article/details/130985763