Vue2 has been used for several years, vuE3 immediately after coming out to study and use the official website, the following comb some of their own feelings.

1.为什么要有vue3

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

  1. As the growth of the function, the increase of demand, complex component code is more and more difficult to maintain, logic confusion, although vue2 also has some of the ways to reuse, but have some disadvantages, such as we often use a Mixin, particularly prone to naming conflicts, exposed variable intent is not obvious, reuse to other components easy to conflict.

  2. Vue2’s support for typeScript is very limited and does not allow for TS integration.

The appearance of VUE3 is to solve the disadvantages of VUE2, its composition API is a good solution to the problem of logic reuse, and vuE3 source is written in TS, ts support is very good. We can use the blessing of TS during the development project to make the code more robust.

2. The advantages of vue3

  1. Vue3 supports most features of VUE2 and is compatible with VUE2
  2. Compared with VUE2, VUE3 has obvious performance improvement
    • Package size reduced by 41%
    • First render is 55% faster and update is 133% faster
    • Memory usage decreased by 54%
  3. Vue3 has the Composition API for logic modularity and reuse
  4. New features have been added, such as Teleport components, global API modifications and optimizations

3. Different principles of response

Voo2.x implements bidirectional data binding. It uses Object. DefineProperty of ES5 to read and modify data according to specific keys. The setters do the data hijacking, the getters do the data modification. But you must first know what key you want to intercept and modify, so vuE2 can’t do anything about new attributes. For example, it can’t listen for attribute additions and deleutions, array index and length changes. The solution for VUe2 is to add responses to the nested objects using methods such as vue.set (object, propertyName, value).

Vue3.x uses ES2015’s faster native proxy instead of Object.defineProperty. Proxy can be understood as that a layer of “interception” is set up before the object, and the external access to the object must pass this layer of interception first. Therefore, it provides a mechanism to filter and rewrite the external access. Proxy can directly listen on objects rather than properties and return a new object, with better responsive support

4. Difference in life cycle

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 the life cycle function in the page, vuE2 used to write the life cycle directly in the page, while VUE3 needed to reference it, which is why 3 can compress the code even lower

5. The default project directory structure is different

Vue3 removes the config file directory, config and build folders, removes the static folder, adds the public folder, moves index.html to public, and adds the views folder to the SRC folder. Used to categorize view components and common components

6. Global API optimization by Vue3

In Vue3, both the global and internal apis have been refactored to take tree-shaking support into account. As a result, the global API is now accessible only as a named export built by an ES module.

import { nextTick } from 'vue'
nextTick(() = > {
  // Something related to the DOM
})
Copy the code

Entrance to the file

/ / vue2 writing
// The vue2 global configuration changes the Vue object properties
// It is also difficult to share a Vue object with different configurations between 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 writing
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')


Copy the code

7. More information

  1. Vue3 source
  2. Vue3 website