SoFunction
Updated on 2025-04-07

Summary of the advantages of Vue3 vs. Vue2

1.Why should there be vue3

When we use vue2, we often encounter some things that are not very good, such as:

  1. As the functions grow and the demand increases, the code of complex components becomes more and more difficult to maintain and the logic is confusing. Although vue2 also has some reuse methods, they all have certain disadvantages. For example, the Mixin we often use is particularly prone to conflicts in life names. The intention of exposed variables is not very obvious, and reusing other components is easy to conflict.
  2. vue2 has very limited support for typeScript, without considering the integration of ts.

The emergence of vue3 is to solve the disadvantages of vue2. Its composition API solves the problem of logical reuse well, and the source code of vue3 is written in ts, which supports ts very well. We can use the blessing of ts during the development process to make the code more robust.

2. Advantages of vue3

  1. vue3 supports most features of vue2, achieving compatibility with vue2
  2. vue3 has significant performance improvement compared to vue2
    1. Packaging size reduced by 41%
    2. First rendering is 55% faster, update is 133% faster
    3. Memory usage reduction by 54%
  3. vue3 has composition API to implement logical modularity and reuse
  4. Added new features such as Teleport components, global API modification and optimization, etc.

3. Different principles of responsiveness

The principle of two-way data binding is realized through es5 and read and modify according to the specific key. The setter method implements data hijacking and getter implements data modification. However, you must first know what the key you want to intercept and modify, so vue2 can do nothing about new attributes, such as being unable to listen for attribute addition and deletion, array index and length changes. The solution to vue2 is to use (object, propertyName, value) and other methods to add responsiveness to nested objects.

Used ES2015's faster native proxy replacement. Proxy can be understood as setting up a layer of "intercept" before the object. All external accesses to the object must first pass this layer, so it provides a mechanism to filter and rewrite external access. Proxy can directly listen to objects instead of properties and return a new object with better responsive support

4. Different life cycles

beforeCreate -> Please use setup()

created -> Please use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

If you want to use lifecycle functions in a page, in the past, vue2 operations directly wrote lifecycle in the page, and vue3 needs to be referenced. This is why 3 can compress the code to a lower level

5.Different project directory structure

vue3 removed the configuration file directory, config and build folders, removed the static folder, added the public folder, and moved to public. The view folder was added to the src folder for classification view components and public components

6. Optimization of global API by vue3

In Vue3, both the global and internal APIs have been refactored, with tree-shaking support in mind. Therefore, the global API is now accessible only as a named export for ES module builds.

import { nextTick } from 'vue'
nextTick(() => {
  // Some DOM-related stuff})

Entry file

// vue2 writing// Changes to vue2 global configuration will modify the properties of the Vue object// It is also very difficult to share a Vue object with different configurations in different apps.import Vue from 'vue'
import App from './'
=xx
(...)
(...)

new Vue({
  render:h=>h(app)
}).$mount('#app')

// vue3 writingimport { createApp } from 'vue'
import App from './'
const app = createApp(APP) // Create an app instance=xx  // Modify the configuration on the instance, there will be no conflict(...)
(...)
('#app')

7. Use Proxy to replace defineProperty

Advantages of Proxy over defineProperty

There are three main problems with ():

  • Can't listen for changes in arrays
  • You must traverse each property of the object
  • Nested objects must be traversed deeply

Proxy was officially added to the ES2015 specification and has the following characteristics:

  • For objects: For the entire object, not a certain property of the object, so there is no need to traverse the keys. This solves the second problem above ()
  • Support arrays: Proxy does not need to overload the array methods, saves a lot of hacks, reducing the amount of code equals reducing maintenance costs, and the standard is the best.

In addition to the above two points, Proxy also has the following advantages:

  • The second parameter of Proxy can have 13 interception methods, which is richer than ()
  • Proxy has received the focus of browser manufacturers as a new standard and performance optimization, in contrast () is an existing old method.

8. More information

vue3 source code
vue3 official website

The above is a detailed summary of the advantages of Vue3 vs. Vue2. For more information about the advantages of Vue3 vs. Vue2, please follow my other related articles!