Summary of the advantages of Vue3 vs. Vue2

1. Why do we need vue3?

When we use vue2, we often encounter some unpleasant experiences, such as:

1. With the growth of functions and the increase of requirements, the code of complex components is becoming 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, Mixin, which we often use, is particularly prone to naming conflicts. The intention of the exposed variables is not very obvious, and it is easy to conflict when reused in other components.
2. Vue2's support for typeScript is very limited, and ts integration is not considered.

The emergence of vue3 is to solve the shortcomings of vue2. Its composition API solves the problem of logic reuse very well. Moreover, the vue3 source code is written in ts, and it supports ts very well. We can use ts to make the code more robust during project development.

2. Advantages of vue3

1. Vue3 supports most of the features of Vue2 and is compatible with Vue2
2. Vue3 has obvious performance improvement compared to Vue2
   1. Reduced package size by 41%
   2. 55% faster initial rendering, 133% faster updates
   3. Memory usage reduced by 54%
3. Vue3's composition API enables logic modularization and reuse
4. Added new features, such as Teleport components, global API modifications and optimizations, etc.
   

3. Differences in responsive principles

Vue2.x implements the principle of two-way data binding through es5's Object.defineProperty, which reads and modifies data based on specific keys. The setter method is used to implement data hijacking, and the getter method is used to modify the data. However, you must first know what key you want to intercept and modify, so vue2 can't do anything about the newly added attributes, such as being unable to monitor the addition and deletion of attributes, changes in array indexes and lengths. The solution of vue2 is to use methods such as Vue.set(object, propertyName, value) to add responsiveness to nested objects.

Vue3.x uses ES2015's faster native proxy to replace Object.defineProperty. Proxy can be understood as setting up a layer of "interception" before the object. Any external access to the object must first pass through this layer of interception. Therefore, it provides a mechanism to filter and rewrite external access. Proxy can directly monitor objects instead of properties and return a new object, with better responsive support

4. Differences in life cycle

beforeCreate -> Please use setup()

created -> use setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

If you want to use the life cycle function in the page, the previous operation of vue2 is to write the life cycle directly in the page, and vue3 needs to be referenced, which is why 3 can compress the code to a lower level.

5. Differences in default project directory structure

Vue3 removes the configuration file directory, config and build folders, removes the static folder, adds a public folder, and moves index.html to public. A views folder is added to the src folder to classify view components and public components.

6.vue3 optimizes the global API

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

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

Entry file

// Vue2 writing // Modification of 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 './App.vue'
Vue.config.xx=xx
Vue.use(...)
Vue.mixin(...)

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

// Vue3 import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(APP) // Create an app instance app.config.xx=xx // Modify the configuration on the instance without conflict app.use(...)
app.mixin(...)
app.mount('#app')

7. Use Proxy instead of defineProperty

Advantages of Proxy over defineProperty

There are three main problems with Object.defineProperty():

• Cannot monitor array changes
• You must iterate over each property of the object
• Must traverse deeply nested objects
  

Proxy was officially added in the ES2015 specification. It has the following features:

• For objects: for the entire object, rather than a certain attribute of the object, so there is no need to traverse the keys. This solves the second problem with Object.defineProperty() mentioned above
• Support arrays: Proxy does not need to overload array methods, eliminating many hacks. Reducing the amount of code means 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 Object.defineProperty()
• As a new standard, Proxy has received much attention and performance optimization from browser manufacturers. In contrast, Object.defineProperty() is an old method.

8. More information

vue3 source code
vue3 official website

The above is a detailed summary of the advantages of Vue3 over Vue2. For more information about the advantages of Vue3 over Vue2, please pay attention to other related articles on 123WORDPRESS.COM!