【Vue】基础系列（八）生命周期 - 初始化显示 - 更新状态 - 死亡状态 - 父子组件

最新推荐文章于 2024-04-28 01:00:28 发布
最新推荐文章于 2024-04-28 01:00:28 发布
阅读量2.1k 收藏 10
点赞数 11
分类专栏： 前端框架Vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44972008/article/details/112835864
版权
本文详细探讨了Vue对象的生命周期，包括初始化显示、状态更新和死亡（销毁）阶段。阐述了Vue实例创建时的特殊回调函数，如初始化操作常用于发送AJAX请求和绑定事件，而销毁时则用于清理资源。同时，讨论了父子组件的生命周期，涵盖了加载、更新和销毁各个阶段的关键点。
摘要由CSDN通过智能技术生成

在这里插入图片描述

1. vue对象的生命周期

生命周期：

  1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。
  2. 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
  3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
  4. 生命周期函数中的this指向是vm 或 组件实例对象。
  1. 初始化显示
    • beforeCreate()
    • created()
    • beforeMount()
    • mounted()
  2. 更新状态
  • beforeUpdate()
  • updated()
  1. 销毁 vue 实例: vm.$destory()
  • beforeDestory()
  • destoryed()

在这里插入图片描述

2. 原理解释图

请添加图片描述

3. 常用的生命周期方法

  • mounted(): 发送ajax请求, 启动定时器、绑定自定义事件、订阅消息等异步任务【初始化操作】
  • beforeDestroy(): 做收尾工作, 如: 清除定时器、解绑自定义事件、取消订阅消息等【首尾工作】

4. 关于销毁Vue实例

  1. 销毁后借助Vue开发者工具看不到任何信息
  2. 销毁后自定义事件会失效，但原生DOM事件依然有效
  3. 一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。

5. 示例

<body>
    <div id="demo">
        <button @click="destoryVM">destroy vm</button>
        <p v-show
最低0.47元/天 解锁文章
YK菌
关注
专栏目录
【第十二篇】Vue中的实例对象的生命周期
波波烤鸭的博客
07-18 8790
  通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象，如下 var vm = new Vue({...}) 那么这个Vue实例的生命周期是怎么样的呢？本文我们就来详细的介绍下   此图为Vue官方给出的生命周期图，可先大概浏览下，如果不懂先不管，继续往下看。 Vue实例生命周期   上图是官方给出的生命周期的流程图。我们一一来介绍下生命周期中各个方法的具体作用,为了便于理...
12.Vue生命周期
西瓜咬人啦
10-21 230
Vue8个生命周期 顺序 生命周期 1 beforeCreate(创建前) 2 created(创建后) 3 beforeMount(载入前) 4 mounted(载入后) 5 beforeUpdate(更新前) 6 updated(更新后) 7 beforeDestroy(销毁前) 8 destroyed(销毁后) 1. 代码 <!DOCTYPE html> <html lang="en"> <head> &lt
Vue——12——vue实例的生命周期
x1037490413的博客
07-04 136
生命周期钩子=生命周期函数=生命周期事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="..
vue的十二个生命周期钩子函数
joy_lover的博客
12-12 1202
vue的十二个生命周期钩子函数 我们一般认为vue有四个阶段,八个周期,如图: 官网提供的整个周期流程,如图所示,只写了八个生命周期钩子函数 vue的生命周期钩子： 初始化 beforeCreate、created 创建期 beforeMount、mounted 更新期 beforeUpdate、updated 销毁期 beforeDestroy、destroyed 配合keep-alive 使用...
vue对象生命周期
Sycc的博客
02-28 529
vue对象生命周期: 1. 什么是: 一个VUe对象从创建到所有页面内容加载完成所经历的过程 2. 包括: 4个阶段: (1). 创建 create 必经 a. 创建new Vue()对象，在new Vue()对象中创建data对象并请保镖 b. 暂时不扫描DOM树，暂时没有虚拟DOM树 (2). 挂载 mount 必经 a. 扫描DOM树，生成虚拟DOM树，并首次挂载数据到页面元素上 (3). 更新 update 当data中的变量被修改时才触发 (4). 销毁 destroy 还有调用$destroy
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
在开发Vue应用时，理解父子组件的生命周期执行顺序和钩子函数是至关重要的。 Vue实例的生命周期包括多个阶段，每个阶段都有相应的钩子函数（hook），这些钩子函数是Vue实例在特定生命周期阶段被调用的函数。当创建...
vue同步父子组件和异步父子组件的生命周期顺序问题
10-17
在Vue框架中，父子组件的生命周期顺序是一个非常重要的概念，它关系到组件的挂载、数据初始化和销毁过程。特别是在动态引入组件时，生命周期的顺序会有所不同。下面我们将详细介绍同步引入和异步引入父子组件时，其...
2024前端面试系列——Vue面试题_描述下 vue 从初始化页面--修改数据--刷新页面 ui 的过程
最新发布
2401_84419493的博客
04-28 915
但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而 React 更强调数据的不可变。
vue组件化编程-todoList案例.zip
07-14
- 可能会在这些钩子中初始化数据、执行异步操作或处理DOM更新。 6. **状态管理**： - 如果待办事项列表在多个组件之间共享，可能使用Vue的内置状态管理工具`Vuex`，或简单的父子组件通信方式。 7. **路由管理**...
浅谈vue生命周期共有几个阶段？分别是什么？
11-19
一共8个阶段 1、beforeCreate（创建前） 2、created（创建后） 3、beforeMount（载入前） 4、mounted（载入后） 5、beforeUpdate（更新前） 6、updated（更新后） 7、beforeDestroy（销毁前） 8、destroyed（销毁后） vue第一次页面加载会触发哪几个钩子函数？ beforeCreate、created、beforeMount、mounted DOM 渲染在哪个周期中就已经完成？ mounted 补充知识：记录一次vue数据不同步的排查 今天我遇到了一个vue异步获取数据后视图没有更新的问题，排查了很久很久，最后
12-VUE的生命周期
m0_57262196的博客
04-06 77
需求：实现一个自动减少透明度的文本效果效果如下：首先我们可以通过在Vue实例的外部添加一个定时器来控制Vue实例中透明度数值的变化-- 以下说明页面的代码如同 --> < div id = " root " :x = " x " > < h2 > n的值为：{{n}} </ h2 > < button @click = " add " > 点我n+1 </ button > < button @click = " bye " > 点我销毁vm </ button > </ div >
Vue基础-12-组件生命周期（重点）
xx661660的博客
07-04 268
组件创建到销毁的过程其实就是一个生命开始和结束过程。目前我们项目中只有一个html文件，单文件开发（SPA）SPA： Single Page Application（单页应用程序）概念：就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。页面实现采用组件来进行加载。再Vue组件运行过程中，会经历很多个阶段。每个阶段都可以执行不同的业务代码Vue实例生命周期一共划分四个阶段：1、创建阶段：newVue这个对象，并且要初始化你们data数据。一旦执行完毕
Vue前端框架12 组件生命周期、生命周期的应用、动态组件、组件保持存活、异步组件、依赖注入、Vue应用原理
Wantfly9951的博客
09-14 1024
每个Vue组件在创建时需要经历一系列的初始化步骤，比如设置侦听，编译模板，挂载实例到DOM，或者数据改变时更新DOM。在使用上面说的component:is 在多个组件之间切换时，被切换的组件会被卸载。在这个过程中，也会运行生命周期钩子函数，可以让我们在特定阶段运行自己的代码。可以通过keep-alive 组件强制被切换掉的组件依然保持存活状态。每个Vue应用都是从createApp函数创建的一个新的应用实例。公共资源存放在src目录下的assets文件夹下。一般我们都用App.vue作为我们的根组件。
Vue系列之vue生命周期详解
老__L的博客
02-17 2901
Vue 实例从创建到销毁的过程，就是生命周期。也就是说从开始创建、初始化数据、编译模板、挂载DOM→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
Vue的生命周期详细介绍
vue888的博客
09-21 2415
Vue的生命周期详细介绍
2019-10-12 Vue-vue框架全生命周期理解
xumaozeng的博客
10-12 251
2019-10-12 Vue-vue框架全生命周期理解第一阶段：beforeCreate-初始化界面前深入响应式原理beforeCreate第二阶段：created(初始化界面后)created第三阶段：beforeMount(渲染dom前)beforeMount第四阶段：mounted(渲染dom后)mounted第五、六阶段：beforeUpdate(更改数据前)和updated(更改数据后)...
浅谈Vue生命周期
AnTiforsec的博客
05-29 240
生命周期&钩子函数 官方图片(2.x) 先简单介绍一下流程 pre - new Vue() 为Vue实例分配内存空间, Vue生命周期开启 no.1：beforeCreate() first 这是Vue生命周期第一个钩子函数 · 这时的vm就像一个空壳 then 开始初始化Vue的数据及事件, 并对其数据进行监控 no.2： created() frist 此时所有的对象和属性都已编译到了内存之中 · 所有我们可以通过this.property读取到数据 then 开始寻找挂
Vue生命周期钩子剖析（共12个钩子）
热爱前端的大三在校生
07-04 9767
Vue生命周期钩子剖析，告别一知半解
"2023Vue面试题总结-组件通讯、数据函数及生命周期详解
以上是对2023年vue面试题的总结，涵盖了MVVM和MVC的区别、Vue中data的函数形式、组件通信的方式以及Vue的生命周期方法等内容。这些知识点是vue开发中常遇到的问题，掌握了这些知识，可以更好地应对vue相关的面试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值