Vue生命周期概述

原创 已于 2022-09-24 17:35:41 修改 · 155 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2022-09-20 21:32:03 首次发布
本文详细介绍了Vue.js中的组件生命周期，包括创建、挂载、更新和销毁四个主要阶段，并解释了每个阶段对应的钩子函数的作用及应用场景。 
![生命周期](https://img-blog.csdnimg.cn/eff0fc7d178a463cab20f9525b3ee25d.png#pic_center)

怀胎-出生-成长-入土
儿童时期，青年时期，成年，老年

  在不同的阶段可以做不同事情 (有些事件只能在某个阶段做才合理)

  其实就是描述的是vue组件的生命周期

  描述的组件实例、虚拟dom、真实dom的关系

  分4个阶段:  (8个钩子,也是组件实例的选项)



beforeCreate( ) // 创建前，此时组件实例未创建，不可以使用data，虚拟DOM未创建，真实DOM未渲染

created( ) // 创建后，组件实例已创建，可以使用data，但是虚拟DOM未创建，真实DOM未渲染

beforeMount( ) // 挂载前，组件实例已创建，可以使用data，但是虚拟DOM未创建，真实DOM未渲染

mounted( ) // 挂载后，组件实例已创建，可以使用data，虚拟DOM创建，真实DOM渲染

beforeUpdete( ) // 更新前，组件实例已创建，拿到更新后的数据，更新后的虚拟DOM，真实DOM未更新

updated( ) // 更新后，组件实例已创建，拿到更新后的数据，更新后的虚拟DOM，更新后的真实DOM

beforeUnmount( ) // 销毁前

Unmounted( ) // 销毁后


  创建前/后 - 挂载前后   -  更新前后  - 销毁前/后 

  beforeCreate

  created

  beforeMount

  mounted

  -- 以上4钩子,在组件创建的时候会依次执行

​    场景: 

​      某个页面一打开的时候,就要去请求数据然后显示出来

​      在vue开发中,只要把请求到的数据,赋值给data, 那么页面显示出来了

​        这时候就要选择一个生命周期的钩子去做请求操作

​        created  beforeMount  mounted 这三个都可以

​        但是建议在mounted上做:  此时整个实例,虚拟dom都是完整的了

​        所以mounted这个生命周期钩子,使用频率肯能会比较频繁

  当组件有更新的时候,就会触发更新阶段的钩子

  beforeUpdate

  updated

  vue的其中一个特点就是虚拟dom, 它的作用就是减少真实dom的操作(比较耗性能)
img标签
pbaiking的博客
02-26 1394
页面中的图片会非常的多，通常我们会新建一个文件夹来存放这些图像文件images，这时候再查找图像，就需要通过路径的来描述图像文件的位置。概述:相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系，常用的相对路径包括当前目录，上一级目录，下一级目录。-- ./ 可以省略 -->- 作用:指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验。图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像。- 作用：用于指定图像文件的路径和文件名。
onclick 获取img 里面的id_如何理解React里面的生命周期？
weixin_39796140的博客
12-03 227
生命周期列如一下代码：let div =document.createElement('div')创建一个div，div的create/construct过程。div.textContent='hi'给div添加一个数据，也可以理解为初始化state。document.bodyappendChild(div)将div挂载body里面在页面展示出来，div的mount过程。div.textConte...
HTML，javascript，image等加载,DOM解析，js执行生命周期
matiascx的博客
07-31 522
原生HTML：img 相关属性详解（alt属性,onerror事件，以及其他基本属性）,css中的object-fit
qq_37899792的博客
05-20 7101
属性 属性值 描述 src URL 图像的路径 alt 文本 图像不能显示时的替换文本 title 文本 鼠标悬停时显示的内容 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 数字 设置图像边框的宽度 vspace 像素 设置图像顶部和底部...
vue生命周期概述
IT_JiaRouBing的博客
05-11 659
这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之 前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。在updated钩子函数里面就可以 获取到因diff算法比较差异得出来的真实dom渲染了。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监 听器被移除，所有的子实例也都被销毁。当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行,这个钩子函数获取dom 的内容是更新之前的内容。
Vue 生命周期概述
古月沧澜的博客
08-23 339
实例初始化后，数据观测（data observer）和事件配置之前调用。此时无法访问data和methods等属性。console.log('beforeCreate: 实例刚创建，数据未初始化');created：实例创建完成，数据观测和事件配置已完成。可以访问data和methods，但 DOM 未挂载。console.log('created: 数据已初始化，DOM 未生成');
vue3——生命周期概述
weixin_63215361的博客
07-03 5197
Vue3的生命周期是指组件从创建到销毁的整个过程，期间会触发一系列钩子函数，允许我们在特定阶段执行代码。理解生命周期有助于更好地控制组件行为。选项式API（Options API）：与Vue2类似的生命周期钩子组合式API（Composition API）：通过导入函数使用的生命周期钩子Vue3生命周期提供了组件不同阶段的钩子函数，使我们能够精确控制组件行为。无论是使用选项式API还是组合式API，理解生命周期都是掌握Vue3的关键。创建阶段。
Vue生命周期概述(看完就懂)
wzj12345545646的博客
10-04 618
先上一张图。 一，了解生命周期的四阶段 这就是一个完整的生命周期，生命周期必经四个阶段，每个阶段有两个钩子函数，顺便提一下钩子函数（不需要你去调用，它在需要执行的地方就会自动调用） 我写一下这几个钩子，下面给大家详细介绍钩子做了什么，什么时候进行调用。 1.初创期 beforeCreat created 1.初创期，顾名思义，初创期就是刚开始创建，初创期有两个钩子函数(beforecreat和created)，我给大家说一下两个钩子函数的...
Vue生命周期
05-18
### Vue生命周期详解 #### 一、生命周期概述 Vue.js 是一款流行的前端框架，它通过声明式的编程模型简化了用户界面的构建过程。Vue 的核心特性之一是它的生命周期机制，这为开发者提供了对组件不同阶段的控制能力...
vue3.0生命周期的示例代码
10-14
#### Vue组件生命周期概述 在Vue框架中，每个组件从创建到销毁都会经历一系列的阶段。为了在这些阶段中执行特定的代码，Vue为开发者提供了生命周期钩子函数。Vue2.x版本中已经对生命周期钩子有了成熟的实现，而在...
Vue 生命周期方法详解
My_wife_QBL的博客
07-02 926
Vue 组件的生命周期可以分为几个阶段：创建（Creation）、挂载（Mounting）、更新（Updating）和销毁（Destruction）。每个阶段都有相应的生命周期钩子，开发者可以在这些钩子中执行特定的逻辑。
Vue项目开发 对vue生命周期的理解？在created和mounted这两个生命周期中请求数据有什么区别呢？
向着太阳迎着光
11-20 1338
Vue 生命周期指的是 Vue 实例从创建到销毁的过程，在这一过程中，Vue 会根据不同的阶段触发相应的生命周期钩子函数。生命周期钩子是一些特定的时机，用于在 Vue 实例的不同阶段执行自定义逻辑。创建阶段：包括created挂载阶段：包括mounted更新阶段：包括updated销毁阶段：包括destroyedcreatedcreated：适用于初始化逻辑，不依赖 DOM 渲染，通常用来处理数据请求、事件监听等逻辑。由于此时 DOM 尚未挂载，无法进行 DOM 操作。mounted。
Vue 3 生命周期函数详解
licy__的博客
12-08 5030
Vue 实例从创建到销毁经历了一系列的阶段，这些阶段被称为生命周期。在每个阶段，Vue 提供了相应的钩子函数（Lifecycle Hooks），允许开发者在特定的时间点执行自定义逻辑。| |v v| |v v| |v vVue 3 引入了 Composition API 和setup函数，使得组件逻辑更加模块化和可复用。此外，部分生命周期钩子名称有所变化，以更清晰地表达其含义。
Vue3常用的组合式API 超详细讲解
最新发布
只会写bug
12-03 269
Vue3响应式系统核心API解析：ref与reactive的底层原理、使用场景及对比 摘要： Vue3的响应式系统基于Proxy实现，主要提供ref和reactive两个基础API。ref通过包装对象处理基本类型（需.value访问），兼容复杂类型时会自动转为reactive；reactive直接代理对象/数组，支持深层属性响应。两者各有适用场景：ref适合基本类型和需要替换整个对象的场景，reactive适合简单对象操作。此外，computed提供响应式派生值并具有缓存机制。使用时需注意：ref避免直接覆
数码商城系统|电子|基于SprinBoot+vue的数码商城系统(源码+数据库+文档)
伟庭的博客
12-02 519
本文介绍了一个基于SpringBoot和Vue.js开发的数码商城系统。系统采用B/S架构，包含前台用户模块（商品浏览、购物车、会员中心）、后台管理模块（用户、商家、商品分类管理）和商家模块（商品发布、抢购活动）。使用MySQL数据库存储数据，Redis缓存高频访问数据，并采用Redisson分布式锁解决抢购超卖问题。系统实现了商品多级分类、动态属性、库存预警等功能，通过定时任务管理活动上下架，集成富文本编辑器支持资讯发布。该系统有效降低了运营成本，提高了电商管理效率。
计算机毕业设计|基于springboot + vue零食商城管理系统(源码+数据库+文档)
12-03 321
本文介绍了一个基于SpringBoot+Vue的零食商城管理系统。系统采用前后端分离架构，后端使用SpringBoot框架简化开发流程，前端采用Vue.js实现响应式界面，数据库选用MySQL存储数据。文章详细阐述了系统设计原则、技术选型理由，并提供了代码片段和测试用例参考。此外还包含毕设选题推荐和源码获取方式，适合作为计算机专业毕业设计的参考项目。系统功能完善，技术栈主流，具有实际应用价值。
Vue.js 与 Ajax（Axios）的集成与使用
froginwe11的博客
11-29 575
Vue.js 是一个渐进式 JavaScript 框架，它允许开发者使用简洁的模板语法来构建界面，同时使用组件系统来构建可重用的代码块。Vue.js 的核心库只关注视图层，易于上手，且可以与现有的库或现有项目无缝集成。Ajax（Asynchronous JavaScript and XML）是一种在不需要重新加载整个页面的情况下，与服务器交换数据和更新部分网页的技术。通过使用 Ajax，开发者可以创建更流畅、更快速的用户体验。
vue生命周期函数面试题
06-10
### Vue 生命周期函数面试题及相关知识点 Vue 的生命周期函数是面试中经常被问到的重要知识点之一，以下是对 Vue 生命周期函数的详细解析以及相关的面试题整理。 #### 1. Vue 生命周期函数概述 Vue 实例从创建到销毁的过程中会经历一系列的生命周期钩子。这些钩子函数允许开发者在特定的时间点执行代码。以下是 Vue 的生命周期钩子及其作用[^2]： - **beforeCreate**：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前调用。 - **created**：实例已完成数据观测、属性和方法的运算，但尚未挂载到 DOM 上。 - **beforeMount**：模板编译/渲染完成，但尚未挂载到页面上。 - **mounted**：实例已经挂载到 DOM 上，此时可以访问 DOM 元素。 - **beforeUpdate**：数据更新时调用，发生在虚拟 DOM 打补丁之前。 - **updated**：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 - **beforeDestroy**（Vue 2）或 **beforeUnmount**（Vue 3）：实例销毁之前调用。在这一步，实例仍然完全可用。 - **destroyed**（Vue 2）或 **unmounted**（Vue 3）：Vue 实例销毁后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。 #### 2. 面试题示例 - **问题 1**：`created` 和 `mounted` 的区别是什么？ - **答案**：`created` 在实例创建完成后调用，此时可以访问到 data 和 methods，但尚未挂载到 DOM 上；`mounted` 则是在实例挂载到 DOM 后调用，此时可以操作 DOM 元素[^2]。 - **问题 2**：为什么不能在 `watch` 中直接修改被监听的数据？ - **答案**：如果在 `watch` 中直接修改被监听的数据，可能会导致无限循环触发 `watch`，从而陷入死循环。因此，建议在 `watch` 中只执行副作用逻辑，而不直接修改数据。 - **问题 3**：在使用 `<keep-alive>` 缓存组件时，`created` 和 `activated` 的区别是什么？ - **答案**：当组件被缓存时，`created` 不会被重复调用，而 `activated` 会在每次组件被激活时调用。因此，`activated` 更适合用于处理缓存组件的状态恢复逻辑[^2]。 #### 3. Vue 3 中的生命周期变化 Vue 3 对生命周期函数进行了部分调整，主要体现在命名的变化上。以下是 Vue 3 中的生命周期钩子与 Vue 2 的对应关系[^5]： | Vue 2 | Vue 3 | |---------------------|-----------------------| | beforeCreate | setup | | created | setup | | beforeMount | onBeforeMount | | mounted | onMounted | | beforeUpdate | onBeforeUpdate | | updated | onUpdated | | beforeDestroy | onBeforeUnmount | | destroyed | onUnmounted | 此外，Vue 3 引入了 Composition API，通过 `setup` 函数可以在更灵活的上下文中使用生命周期钩子。 #### 4. 示例代码 以下是一个简单的 Vue 3 示例，展示如何使用新的生命周期钩子： ```javascript import { onMounted, onUnmounted } from 'vue'; export default { setup() { onMounted(() => { console.log('Component has been mounted'); }); onUnmounted(() => { console.log('Component has been unmounted'); }); return {}; } }; ``` ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

抬头第一眼，是天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值