This is the ninth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

1. The use of common vue3 functions

  • The setup function, instead of Vue2’s data and method attributes, adds logic directly to the setup

  • The variables used by the ref function in temlate need to be wrapped in ref

  • Arrays and methods that return out of the template can only be used in the template

Setup () {const girls = ref(close, 1); const selectGirl = ref(""); const selectGirlFun = (index) => { selectGirl.value = girls.value[index]; }; return { girls, selectGirl, selectGirlFun, }; },Copy the code
  • reactiveFunction, whose argument is not a primitive type, but an object, so you don’t have to write it in the method.valueAnd put it backdataYou can
setup() { const data = reactive({ girls: ["a", "b", "c"], selectGirl: "", selectGirlFun: (index) => { console.log(1111) data.selectGirl = data.girls[index]; }}); return { data }; },Copy the code

But writing, must use it in the template variables and methods need to be combined with the data, and this is obviously not in line with our development of coding habits, we can think of at the time of return will data deconstruction to use… The extension operator, however, is deconstructed as a normal variable and no longer responsive, so we need to use the toRefs() function

  • toRefsFunction usage
setup() { const data = reactive({ girls: ["a", "b", "c"], selectGirl: "", selectGirlFun: (index) => { console.log(1111) data.selectGirl = data.girls[index]; }}); const refData = toRefs(data); return { ... refData, }; }Copy the code

How do I choose reactive objects and reactive objects? I can choose reactive objects either way. I can choose reactive objects

Ii. Life cycle renewal

The vUE life cycle is unfamiliar to most of you, and it is often used in projects

Lifecycle: Along with the lifecycle, functions are given to the user to manipulate the lifecycle, mainly the hook functions.

The lifecycle of vue3

  • Setup () : start creating components beforebeforeCreateandcreatedBefore executing. Data and Method are created
  • OnBeforeMount () : Functions executed before a component is mounted to a node.
  • OnMounted () : The function that is executed after the component is mounted.
  • OnBeforeUpdate (): Functions executed before component updates.
  • OnUpdated (): Function to execute after the component has been updated.
  • OnBeforeUnmount (): Functions executed before components are unmounted.
  • OnUnmounted (): Function that is executed after the component is unmounted
  • OnActivated (): The component contained in onActivated, which has two additional lifecycle hook functions. Executed when activated.
  • OnDeactivated (): executed when A component is removed from A to B.
  • OnErrorCaptured (): Activates the hook function when capturing an exception from a descendant component.

This section describes the vuE3 life cycle and VUE2 life cycle

Vue2--------------vue3
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

Copy the code

Vue3’s lifecycle functions need to be introduced before they can be used

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

Copy the code
setup() {
  onMounted(() => {
    console.log('mounted')
  })
  onUpdated(() => {
    console.log('updated')
  })
  onRenderTriggered((event) => {
    console.log(event)
  })
}

Copy the code

onRenderTracked 和onRenderTriggeredUse of the hook function

OnRenderTracked => Status tracking, which tracks the status of all the responsive variables and methods on the page, which is what we return out, Whenever there is an update on the page, it will trace, and then generate an Event object. We can use the event object to find the problem of the program, which also needs to be introduced first

import { .... ,onRenderTracked,} from "vue";

Copy the code

And then use it in the setup function

OnRenderTracked (= > {(event). The console log (" state tracking component -- -- -- -- -- -- -- -- -- -- - > "); console.log(event); });Copy the code

OnRenderTracked => State is triggered. Instead of tracking every value, it gives you information about changing values. New values and old values are clearly shown We also need to import to use

import { .... ,onRenderTriggered,} from "vue"; OnRenderTriggered (= > {(event). The console log (" state trigger components -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > "); console.log(event); }); -newvalue Specifies the value of the updated variable. -oldValue specifies the value of the updated variable. -Target Specifies the response variables and functions on the current pageCopy the code

In this way, onRenderTriggered is a little like watch