vue 生命周期

最新推荐文章于 2025-01-12 09:11:23 发布

慌张的唐同学

最新推荐文章于 2025-01-12 09:11:23 发布

阅读量806

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js typescript javascript

本文链接：https://blog.csdn.net/Niall_Tonshall/article/details/123154026

本文详细探讨了Vue实例的生命周期，从create、mount、destroy三个主要阶段进行解析，并通过示例展示了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等八个生命周期钩子函数的工作原理。在不同阶段，实例数据和DOM的状态进行了实时观察，帮助读者更好地掌握Vue组件的更新和渲染过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个Vue实例都会在创建时经历一系列的初始化过程——例如，需要设置数据监听，编译模板，将实例挂载到DOM上并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
在这里插入图片描述
从上图我们可以将Vue的生命周期分为三个节点：

create——创建实例
mounte——挂载DOM
destroy——实例摧毁

Vue一共有八个生命周期钩子函数，这些函数会在特定时间被调用：

钩子函数	调用时间
beforeCreate	创建该Vue实例之前
created	创建该Vue实例之后
beforeMount	将实例挂载到DOM上之前
mounted	将实例挂载到DOM之后
beforeUpdate	实例已经被挂载到DOM上直到该实例被摧毁期间，更新模板渲染之前
updated	实例已经被挂载到DOM上直到该实例被摧毁期间，更新模板渲染之后
beforeDestroy	实例被摧毁之前
destroyed	实例被摧毁之后

为了更好地理解Vue生命周期，我们创建一个cycle.vue

<template>
  <div class="hello">
    {
   
   {
   
   info}}
    <div @click="changeInfo">点击这里</div>
  </div>
</template>

<script>
export default {
   
   
  name: 'cycle',
  data