This is the third day of my participation in the Gwen Challenge

Preface:

Vue2 life cycle I believe that those who have learned VUE know it well will not repeat it here. If you can’t remember it, you can review it on the official website and focus on the changes of vue3 life cycle compared with VUe2.

Life cycle comparison diagram of Vue2. Versus Vue3

Vue2 life cycle diagram

Vue3 life cycle diagram

Vue3 life cycle detailed list

  • setup(): Before starting to create components, inbeforeCreateandcreatedBefore execution. To create thedataandmethod
  • onBeforeMount() : The function executed before the component is mounted to the node
  • onMounted(): a function executed after the component is mounted
  • onBeforeUpdate(): The function executed before the component is updated
  • onUpdated(): A function that is executed after the component is updated
  • onBeforeUnmount(): A function executed before the component is uninstalled
  • onUnmounted(): a function executed after the component is uninstalled
  • onActivated(): is included in<keep-alive>With two more lifecycle hook functions. Executed when activated
  • onDeactivated()For example, switch from component A to component B. The switch is executed when component A disappears
  • onErrorCaptured(): Activates the hook function when an exception from a descendant component is caught

Note: Using the

component keeps the data in memory. For example, if we don’t want to reload the data every time we see a page, we can use the

component.

The use of hook functions

The Vue3 life cycle needs to be introduced before it is called to demonstrate the first five life cycles for a moment.

import {
  reactive,
  toRefs,
  onMounted,
  onBeforeMount,
  onBeforeUpdate,
  onUpdated,
} from "vue";
Copy the code

Setup is run before beforeCreate and created, so it can be used in place of both hook functions.

To see when the hook function will execute, in the setup() function, we write the following code:

const app = {
  name: "App".setup() {
    console.log("1- Start creating component -----setup()");
    const data: DataProps = reactive({
      girls: ["Zhang"."Bill"."Fifty"].selectGirl: "".selectGirlFun: (index: number) = >{ data.selectGirl = data.girls[index]; }}); onBeforeMount(() = > {
      console.log("2- Execute -----onBeforeMount() before mounting components to page");
    });

    onMounted(() = > {
      console.log("3- Execute -----onMounted() after the component is mounted to the page");
    });
    onBeforeUpdate(() = > {
      console.log("4- Component update before -----onBeforeUpdate()");
    });

    onUpdated(() = > {
      console.log("5- Component after update -----onUpdated()");
    });

    const refData = toRefs(data);

    return{... refData, }; }};export default app;
Copy the code

When you’re done, go to your browser and see what it looks like

1 – Start creating the component —- – setup(); 2 – Execute —- – onBeforeMount() before mounting components to the page; 3 – After the component is mounted to the page, run —- – onMounted(). 4 – Component before update —- – onBeforeUpdate(); 5 – Component after update —- – onUpdated();

The lifecycle function of VUe2 can also be used in vue3

Write the Vue2 lifecycle function after the setup() function as follows:

beforeCreate() {
  console.log("1- Before component creation -----beforeCreate()");
},
beforeMount() {
  console.log("2- execute -----BeforeMount() before mounting components to page");
},
mounted() {
  console.log("3- -----Mounted()");
},
beforeUpdate() {
  console.log("4- component BeforeUpdate -----BeforeUpdate()");
},
updated() {
  console.log("5- Component Updated() -----Updated()");
},
Copy the code

At this point, you can see that the original life cycle is also fully usable.

OnRenderTracked () and onRenderTriggered() hook functions are used

These two hook functions are new to Vue3

The guidelines for using old and new hook functions are specified in the official Vue documentation. If you are using Vue3, try to use the new lifecycle hook functions that are on in the setup() function.

OnRenderTracked state tracking

OnRenderTracked literally is state tracking, so it tracks the state of all the responsive variables and methods on the page, the values that we return, it tracks. Whenever the page has an update, it tracks it and generates an event object that we use to find problems with the program.

Using onRenderTracked is also introduced using import.

import{... ,onRenderTracked,}from "vue";
Copy the code

The reference can be made in the setup() function.

onRenderTracked((event) = > {
  console.log("Status tracking component ----------->");
  console.log(event);
});

Copy the code

After that you can go to the terminal and start the test service and see what happens, onRenderTracked is not executed if the component is not updated, if the component is updated, it changes every value and method in the group.

OnRenderTriggered state triggered

OnRenderTriggered is a state trigger that does not track every value. It gives you information about changing values, and both old and new values are explicitly displayed.

OnRenderTracked for each value, whereas onRenderTracked for just the changed value for debugging. To use it again, import is introduced first

import{... ,onRenderTriggered,}from "vue";
Copy the code

Before using onRenderTriggered, comment the corresponding onRenderTracked code so it looks a lot more intuitive. Write the onRenderTriggered() function inside the setup() function.

onRenderTriggered((event) = > {
  console.log("State-triggered component --------------->");
  console.log(event);
});
Copy the code

Details on the Properties of the Event object:

  • keyThere’s a change in the variable
  • newValueThe updated value of the variable

– oldValue Specifies the value of the variable before the update

  • target The response variables and functions in the current page

Do you think it is similar to watch

The last

The proper use of dog functions allows us to handle the right transaction at the right time, which is a great help for code debugging.