Vue3.0

The original addressJuejin. Cn/post / 696809…

theme: juejin

1 One of the most important changes in treeShaking Vue3 is the introduction of tree-shaking. Tree-shaking makes the bundle smaller, obviously. In the 2.x version, many functions are mounted on the global Vue object, such as nextTick, nextTick, nextTick, set, etc., so although we may not need them, they are still packaged into the bundle once the Vue is introduced.

In Vue3, all apis are introduced in ES6 modularity, which allows packaging tools such as WebPack or Rollup to eliminate unused apis and minimize bundle volume. We can see this change in main.js:

//src/main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

const app = createApp(App);
app.use(router).mount("#app");

Copy the code

CreateApp instance from new Vue() to createApp; But some core features like virtualDOM update algorithms and responsive systems will be packaged anyway; The change is that components (Vue.component), directives (vue.directive), mixin (vue.mixin) and plug-ins (vue.use) that were previously configured globally are now mounted directly on instances; We use the created instance to call, which brings the advantage that an application can have multiple Vue instances, and the configuration between different instances does not affect each other:

const app = createApp(App)
app.use(/ *... * /)
app.mixin(/ *... * /)
app.component(/ *... * /)
app.directive(/ *... * /)
Copy the code

Life cycle function

As we all know, there are eight lifecycle functions in Vue2. X:

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

In vue3, a new setup life cycle function is added. The setup life is executed before the beforeCreate life function, so this cannot be used to fetch instances in this function. BeforeDestroy is renamed beforeUnmount and destroyed is renamed unmounted for naming purposes. Therefore, vue3 has the following lifecycle functions:

• BeforeCreate (setup is recommended instead)
• Created (Setup is recommended instead)
• setup
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount
• unmounted

Vue3 also has a new lifecycle hook. We can access the lifecycle of a component by adding on before the lifecycle function. We can use the following lifecycle hooks:

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted
• onErrorCaptured
• onRenderTracked
• onRenderTriggered

So how do these hook functions get called? We mount the lifecycle hook in setup and call the corresponding hook function when the lifecycle is executed:

import { onBeforeMount, onMounted } from "vue";
export default {
  setup() {
    console.log("----setup----");
    onBeforeMount(() = > {
      // beforeMount code execution
    });
    onMounted(() = > {
      // mounted}); }},Copy the code

New features

We have studied Object defineProperty and Proxy in depth and explained the advantages of Proxy and why Vue3 uses Proxy to implement responsiveness. Meanwhile, Vue3 also removes some responsive apis to make the code more reusable. We can use Reactive to create reactive state for JS objects

import { reactive, toRefs } from "vue";
const user = reactive({
  name: 'Vue2'.age: 18}); user.name ='Vue3'

Copy the code