Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

Vue2 and Vue3 life cycle changes

Just looking at the official Vue document, also a good time to compare, take notes

Changes to the lifecycle options of optional apis

Here we can see that Vue3 doesn’t seem to have made major adjustments to Vue2’s lifecycle hooks

• Modify the
  • destroyedThe lifecycle option has been renamed tounmounted
  • beforeDestroyThe lifecycle option has been renamed tobeforeUnmount
• new
  • ErrorCaptured: Called when you catch an error from a descendant component.
  • RenderTracked: Called when tracking virtual DOM rerendering.
  • RenderTriggered: Called when virtual DOM rerendering is triggered.

The little knowledge

The This context of all lifecycle hooks is automatically bound to the current instance, so we can easily access Data, computed, and methods in the hook function through this.

Then I have a bold idea! Is the arrow function used to define the lifecycle hook function, can we access the desired instance as expected?

Testing:

const app = Vue.createApp({
  data() {
    return {
      cart: 0}},mounted: () = > { console.log(this.cart) },
  methods: {
    addToCart() {
      this.cart += 1
    }
  }
})


app.mount("#app");
Copy the code

As expectedundefinedSo let’s print it outthis The context to point to iswindowIt’s not oursVueInstance.

As for why this is the case, we can easily make a wave of simple explanations from the properties of the arrow function: When we define the arrow function, the definition is initially bound to the parent context. Since the arrow function is bound to the parent context, this will not point to the expected component instance, and this.data and this.addToCart will both be undefined.

Composite lifecycle options API

There is a mapping between the lifecycle options of the optional API and the composite API. Overall, there is little change, except that the name is mostly on${lifecycle options of the optional API}.

• beforeCreate– > usesetup()
• created– > usesetup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeUnmount -> onBeforeUnmount
• unmounted -> onUnmounted
• errorCaptured -> onErrorCaptured
• renderTracked -> onRenderTracked
• renderTriggered -> onRenderTriggered
• activated -> onActivated
• deactivated -> onDeactivated
• Reference: Composite API lifecycle hooks

Use:

export default {
  setup() {
    // mounted
    onMounted(() = > {
      console.log('Component is mounted! ')}}}Copy the code

VNode life cycle events

When I looked up the life cycle of Vue, I found this. To tell the truth, I really haven’t used it in the normal business development, but I would rather learn more than fail to record it!

Vue2x

In the Vue2 version, if we want to listen for phases of the lifecycle within the component. We can use hook:${component lifecycle hook name} to listen for events within a component.

<template>
  <child-component @hook:updated="onUpdated">
</template>
Copy the code

Vue3x

In Vue 3, if we want to listen for phases of the lifecycle within a component. We can use vNode -${component lifecycle hook name} to listen for events within a component. In addition, these events can now be used for HTML elements, just as they are for components.

<template>
  <child-component @vnode-updated="onUpdated">
</template>
Copy the code

Or use the hump nomenclature

<template>
  <child-component @vnodeUpdated="onUpdated">
</template>
Copy the code