VUE的生命周期

于 2023-10-24 09:23:15 发布
阅读量36 收藏
点赞数
文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48419191/article/details/134004220
版权

beforeCreate（创建前）

Vue实例刚创建，data和methods未被初始化，为undefined
无法通过vm访问data中的数据和methods中的方法
可移执行loading等待事件

created（创建后）

数据侦听、计算属性、方法、事件/侦听器的回调函数已经配置完毕
完成data和methods的初始化，页面还未渲染
可以通过vm访问data和methods，$el还没有
可以在该阶段发起请求获取数据，操作data，调用methods等

beforeMount（挂载前）

DOM挂载完成，vue实例的$el和data都初始化了，但还是虚拟DOM节点，双向绑定显示{{ }}
此时页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，都不奏效

beforeMount之后，mounted之前 create vm $el and replace "el"将内存中的虚拟DOM转为真实DOM插入页面

mounted（挂载后）

实例被挂载后调用，el被新创建的vm.$el替换
页面呈现的是经过Vue编译的DOM，至此初始化过程结束
一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等

beforeUpdate（更新前）

数据发生改变，但DOM还未更新，即data已经是新的了，但是页面还是旧的。
适合在现有DOM将要被更新前访问它，比如移除手动添加的事件监听器。

update（更新后）

此时数据是新的，页面也是新的，即页面和数据保持同步
此阶段可以在数据更新时，做一些处理，也可以用watch进行观测

activated（激活前）

被keep-alive缓存的组件激活时调用

deactivated（激活后）

被keep-alive缓存的组件失活时调用

beforeDestory（销毁前）

实例仍处于可用状态，马上要实行销毁
一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等

destoryed（销毁后）

vue实例解除了事件监听和DOM的绑定（无响应了），但DOM节点依旧存在

佩小皮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE生命周期
m0_67014537的博客
07-25 444
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、挂载、更新、销毁，这就是一个组件所谓的生命周期。如果没有template选项，就把实例模板el指向的DOM的outerHTML作为模板。从控制台打印数据，可以看出在beforeCreate时，因为啥动作都还没有开始，所以vm.data是undefined。update阶段当vue实例里面的data数据变化时，触发组件的重新渲染；对于Vue的生命周期，就是其组件的生命周期。更新阶段的前提是当data选项里的数据有变化时触发。...
Vue 生命周期
weixin_47227886的博客
04-14 3万+
主要阶段 挂载（初始化相关属性） ① beforeCreate ② created ③ beforeMount ④ mounted 更新（元素或组件的变更操作） ① beforeUpdate ② updated 销毁（销毁相关属性） ① beforeDestroy ② destroyed Vue实例的产生过程 ① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。...
超详细vue生命周期解析(详解)
热门推荐
weixin_42707287的博客
12-25 12万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
Vue生命周期
啊对对对的博客
04-01 1万+
vue的生命周期 vue生命周期分为四个阶段（常用的有8个，实际上有11个） 第一阶段（创建阶段）：beforeCreate，created 相当于人一生中：准备出生之前的阶段，精子+卵子，细胞组合-十月怀胎-出生 在beforCreate之前 vue做了两件事：methos声明，生命周期钩子函数声明 在创建阶段 data数据注入，data数据劫持 1.遍历递归data选项，给每个声明式变量添加setter/getter 2.把劫持过变量都放在组件实例上
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期实例小结
10-18
下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue实例被创建但数据观测（data observer）和属性及方法尚未初始化时调用。这个阶段实例还不能访问数据和DOM，通常用于配置实例的外部...
vue生命周期图片
09-20
这个图片主要介绍的是vue生命周期的整个过程，从创建到销毁的8个阶段
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
pi_heif-0.17.0-cp39-cp39-macosx_14_0_arm64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
[毕设]酒店管理系统PPT与源码展示.zip
07-27
[毕设]酒店管理系统PPT与源码展示
企业数字化运营管理总体规划方案
最新发布
07-27
本资料围绕总体信息化规划方案、智慧运营系统建设规划方案、阶段性建设方案等方面阐述企业数字化运营管理总体规划方案。
MATLAB hough变换答题卡识别（GUI，配论文）.zip
07-27
MATLAB hough变换答题卡识别（GUI，配论文）.zip
vue 生命周期的理解
10-25
Vue生命周期是指Vue实例从创建到销毁的整个过程，包括了多个阶段，每个阶段都有对应的生命周期函数。Vue生命周期的理解对于开发者来说非常重要，因为它可以帮助我们更好地掌握Vue实例的创建、更新和销毁过程，从而更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值