Detailed explanation of the life cycle hook function in Vue3: Comprehensive mastery of the application of the Vue3 life cycle

Detailed explanation of the life cycle hook function in Vue3: Comprehensive mastery of Vue3 life cycle applications

As a popular JavaScript framework, Vue has always received widespread attention and love. With the release of Vue3, its life cycle hook function has also undergone some changes and optimizations. Understanding the life cycle hook function of Vue3 is very important for front-end developers. This article will introduce in detail the life cycle hook function and its application in Vue3.

The life cycle hook function in Vue3

The life cycle hook function in Vue3 is also divided into four stages: creation, mounting, updating, and destruction. Below we will introduce in detail the life cycle hook functions of these four stages in Vue3 and how to use them.

Creation phase

In the creation phase, Vue3 provides two life cycle hook functions: setup() and onBeforeMount().

setup()

setup() is a new life cycle hook function introduced by Vue3. This must be included in the code in Vue3 Function, setup() The function will be executed when the component is initialized. Its main purpose is to set the data and methods of the component. The usage of

setup() function is similar to data and methods in Vue2.x. We can use setup( ) declare the data and methods that the component needs to use in the function, as shown below:

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello, Vue3!'
    return {
      message
    }
  }
}
</script>

In the above example, we used the const keyword to declare a file named message variable, the value of the variable is 'Hello, Vue3!', and then return it, use {{ message }} in the template to render it Text content.

onBeforeMount()

onBeforeMount()The life cycle hook function is similar to beforeMount() in Vue2.x , indicating the event before the component is mounted to the DOM, it will be executed after the setup() function is executed.

The following is an example of using onBeforeMount():

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello, Vue3!'
    return {
      message
    }
  },
  onBeforeMount() {
    console.log('组件挂载前执行')
  }
}
</script>

In the above example, the onBeforeMount() function will be mounted in the component template Execute before entering the DOM, and execute before the console output component is mounted.

Mounting phase

In the mounting phase, Vue3 provides two life cycle hook functions: onMounted() and onBeforeUpdate() .

onMounted()

onMounted() is similar to mounted() in Vue2.x, indicating that the component is mounted After the event is loaded into the DOM, it will be executed after the setup() function is executed.

The following is an example of using onMounted():

<template>
  <div ref="box">{{ message }}</div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onMounted(() => {
      console.log('组件已经挂载到DOM上')
      console.log(this.$refs.box)
    })

    return {
      message
    }
  }
}
</script>

In the above example, we use the ref function to create a message variable, and use {{ message }} to render the text in the template, and then use the onMounted() function to output the component after the component is mounted. Mounted to the DOM , and the reference to the div element in the component.

onBeforeUpdate()

onBeforeUpdate() is similar to beforeUpdate() in Vue2.x, indicating that the component is Update before event, which is executed after the component's state changes and before the view starts to re-render.

The following is an example of using onBeforeUpdate():

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">修改消息</button>
</template>

<script>
import { onBeforeUpdate, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    const changeMessage = () => {
      message.value = 'Hello, World!'
    }

    onBeforeUpdate(() => {
      console.log('组件即将更新，当前消息为：' + message.value)
    })

    return {
      message,
      changeMessage
    }
  }
}
</script>

In the above example, we use the ref function to create a message variable, and use {{ message }} to render the text in the template, and then use the onBeforeUpdate() function to output the value of the current message before the component is updated.

Update phase

In the update phase, Vue3 provides two life cycle hook functions: onUpdated() and onDeactivated().

onUpdated()

onUpdated() is similar to updated() in Vue2.x, indicating that the component is The post-update event will be executed after the component's state changes and the view is re-rendered.

The following is an example of using onUpdated():

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">修改消息</button>
</template>

<script>
import { onUpdated, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    const changeMessage = () => {
      message.value = 'Hello, World!'
    }

    onUpdated(() => {
      console.log('组件已更新，当前消息为：' + message.value)
    })

    return {
      message,
      changeMessage
    }
  }
}
</script>

In the above example, we use the ref function to create a message variable, and use {{ message }} to render the text in the template, and then use the onUpdated() function to output the value of the current message after the component is updated.

onDeactivated()

onDeactivated() is similar to deactivated() in Vue2.x, indicating that the component is Post-activation event, which will be executed when the component switches from the activated state to the inactive state.

The following is an example of using onDeactivated():

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onDeactivated, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onDeactivated(() => {
      console.log('组件被激活')
    })

    return {
      message
    }
  }
}
</script>

In the above example, we use the ref function to create a message variable, and use {{ message }} to render the text in the template, and then use the onDeactivated() function to output when the component is activated The component is activation.

Destruction Phase

In the destruction phase, Vue3 provides a life cycle hook function: onUnmounted().

onUnmounted()

onUnmounted()与Vue2.x中的beforeDestroy()类似，表示组件销毁的事件，它会在组件被销毁之前执行。

下面是一个使用onUnmounted()的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onUnmounted, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onUnmounted(() => {
      console.log('组件被销毁')
    })

    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onUnmounted()函数，在组件被销毁时输出 组件被销毁。

总结

本文介绍了Vue3中的生命周期钩子函数，它们包括创建阶段的setup()和onBeforeMount()，挂载阶段的onMounted()和onBeforeUpdate()，更新阶段的onUpdated()和onDeactivated()，以及销毁阶段的onUnmounted()。掌握这些生命周期钩子函数，可以帮助我们更好地理解Vue3组件的生命周期，并且在开发Vue3应用时更加得心应手。

The above is the detailed content of Detailed explanation of the life cycle hook function in Vue3: Comprehensive mastery of the application of the Vue3 life cycle. For more information, please follow other related articles on the PHP Chinese website!