Vue学习 — 详解Vue生命周期

小绵杨Yancy

已于 2022-08-06 18:04:31 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue vue生命周期

于 2022-03-19 10:34:50 首次发布

本文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/123566203

Vue 专栏收录该内容

48 篇文章

订阅专栏

本文详细介绍了Vue组件的生命周期八个阶段：beforeCreat、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed，以及父子组件间的生命周期交互。重点讲解了每个阶段的作用和如何利用这些钩子进行数据初始化、DOM操作和组件间通信。

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

一、前言

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

面试是遇到了关于vue生命周期以及双向绑定原理，今天写篇博客记录一下。

二、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

图片取自vue官网：

可以看到：

vue的一个实例具有四个什么周期，分别对应8个钩子函数：beforeCreat，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed

1、beforeCreat / created

(1)、beforeCreat：

当执行beforeCreat生命周期函数时，vue实例还没有被完全创建出来，此时data，methods等内部没有初始化，我们这个时候在函数内调用数据的话，后台会显示undefined。

（2）、created：

执行这个函数的时候，vue实例已经初始化了，可以在这里调用数据，不过还没渲染到页面上。在当前函数中我们可以访问到data中的属性，此时，会将data中的属性和methods的方法添加到vue的实例身上，同时会将data中所有的属性添加一个getter/setter方法，前后端的ajax交互一般在这个钩子函数中。