前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue生命周期及其应用场景_介绍vue生命周期流程

vue生命周期及其应用场景_介绍vue生命周期流程

作者头像
全栈程序员站长
发布2022-11-01 10:11:03
4040
发布2022-11-01 10:11:03
举报
文章被收录于专栏:全栈程序员必看

文章目录

一,vue生命周期函数:

在这里插入图片描述
在这里插入图片描述

vue的生命周期函数又叫钩子函数: 生命周期方法详解:

代码语言:javascript
复制
beforeCreate    
//详情    //实例创建前,这个时候的 el,data,message 都是 underfined
//场景    //可以加入 loading 事件;
代码语言:javascript
复制
Created
//详情          //实例创建完成后,data、methods 被初始化
//场景          //结束 loading 事件,还可以进行一些数据,资源的请求。(进行ajax请求异步数据的获取、初始化数据)
代码语言:javascript
复制
beforeMount
//详情          //挂载初始之前,完成 el 初始化,render 被初次调用用于生成虚拟dom
代码语言:javascript
复制
Mounted
//详情          //完成挂载
//场景          //dom树已完成渲染到页面,可以进行一些DOM操作
代码语言:javascript
复制
beofreUpdate
//详情          //修改之前调用,但不进行DOM重新渲染,在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
//场景          //可以在这个钩子中进一步地更改状态
代码语言:javascript
复制
Updated
//详情          //由于数据更改,重新渲染界面时调用
//场景          //这个状态下数据更新并且DOM重新渲染,当这个生命周期函数被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
代码语言:javascript
复制
activated
//详情          //keep-alive 组件激活时调用
代码语言:javascript
复制
deactivated
//详情          //组件停用时调用
代码语言:javascript
复制
beforeDestroy
//详情          //实例销毁之前调用
代码语言:javascript
复制
Destroyed
//详情          //实例销毁后调有。
//场景          //调用后,所有事件都会被解绑,所有的事件监听器会被移动,子实例也会被销毁,还可以执行一些优化操作,清空定时器。
代码语言:javascript
复制
errorCaptured
//详情          //当捕获一个来自子孙组件的错误时被调用。收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。
在这里插入图片描述
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/179464.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年10月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 文章目录
  • 一,vue生命周期函数:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档