What is the difference between vue3.0 and vue2.0?-Vue.js-php.cn

What is the difference between vue3.0 and vue2.0?

青灯夜游

Release： 2022-02-14 10:12:28

Original

112656 people have browsed it

Difference: In vue2.0, no matter how big the data is, an observer will be created for it at the beginning; when the data is large, this may cause obvious performance pressure when the page is loaded. Vue3.0 will only create observers for "the data used to render the initial visible part", and vue3.0's observers are more efficient.

What is the difference between vue3.0 and vue2.0?

##The difference between vue3.0 and 2.0

Vue-cli3.0 in 8 It was officially released on March 11th. After reading the comments, the compatibility is not very good and there are many changes in the commands. I am not particularly optimistic.

Compared with vue2.0, the advantages of the release of vue3.0 are mainly reflected in: Faster, smaller, easier to maintain, easier to native, easier for developers;

faster 1. Virtual DOM is completely rewritten, mounting & patching is 100% faster ;
2. More compile-time reminders to reduce runtime overhead;
3. Proxy-based observer mechanism to meet full language coverage and better performance;
4. Abandon Object. defineProperty, use faster native Proxy;
5. Component instance initialization speed is increased by 100%;
6. Speed is doubled/memory usage is reduced by half;

is smaller 1. Tree-shaking is more friendly;
2. New core runtime: ~ 10kb gzipped;

================

3.0 Newly added TypeScript and PWA support

Some commands have changed:

Download and install npm install -g vue@cli
Deleted vue list
Create project vue create
Start project npm run serve
The default project directory structure has also changed:
The configuration file directory, config and build folders have been removed
Removed the static folder, added a public folder, and moved index.html to public
Added a views folder in the src folder for classifying view components And public components

Note:
php Chinese online work has also begun to teach the latest version of the vue course. Interested friends can learn more .

Installation

npm install -g vue@cli

Copy after login

Create project file:

vue create project //项目的名称

Copy after login

============= =======

The difference between vue2 and vue3

1. Common commands

vue -V Check the local vue version

2. Official document

3.0: https://cli.vuejs.org/zh/

3. Create file

3.0: vue create enter the project file folder to create the project.

2.0: vue init webpack

4. Start the project

3.0 Start npm run serve

2.0 Start npm run dev

build Gone, the config is gone, oh, and the most important point is that node-model is automatically downloaded when installing the 3.0 project.

Create a vue.config.js in the root directory

module.exports = {
 baseUrl: process.env.NODE_ENV === &#39;production&#39; ? &#39;/online/&#39; : &#39;/&#39;,
 // outputDir: 在npm run build时 生成文件的目录 type:string, default:&#39;dist&#39;
 // outputDir: &#39;dist&#39;,
 // pages:{ type:Object,Default:undfind }
 devServer: {
 port: 8888, // 端口号
 host: &#39;localhost&#39;,
 https: false, // https:{type:Boolean}
 open: true, //配置自动启动浏览器
 // proxy: &#39;http://localhost:4000&#39; // 配置跨域处理,只有一个代理
 proxy: {
 &#39;/api&#39;: {
 target: &#39;<url>&#39;,
 ws: true,
 changeOrigin: true
 },
 &#39;/foo&#39;: {
 target: &#39;<other_url>&#39;
 }
 }, // 配置多个代理
 }
 }

Copy after login

==================

The difference between Vue3.0 and Vue2.0

1. Lazy observation is performed by default.

In version 2.x, no matter how big the data is, observers will be created for it at the beginning. When the data is large, this can cause significant performance pressure when the page loads. In version 3.x, observers will only be created for "data used to render the initial visible part", and 3.x observers are more efficient.

2. More accurate change notifications.

In proportion: in version 2.x, when you use Vue.set to add a property to an object, all watchers of this object will be re-run; in version 3.x, only those that depend on that property The watcher will run again.

3. 3.0 has newly added support for TypeScript and PWA

4. Some commands have changed:

Download and install npm install -g vue@cli

Deleted vue list

Create project vue create

Start project npm run serve

5. The default project directory structure has also changed:

The configuration file directory, config and build folders were removed

The static folder was removed, the public folder was added, and index.html was moved to public

In the src folder A new views folder is added for classifying view components and public components

Related recommendations:

2020 Summary of front-end vue interview questions (with answers) )

vue tutorial recommendation: The latest 5 vue.js video tutorial selections in 2020

For more programming-related knowledge, please visit:

Programming Teaching! !

The above is the detailed content of What is the difference between vue3.0 and vue2.0?. For more information, please follow other related articles on the PHP Chinese website!