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

全栈程序员-站长 • 2022年10月21日下午3:00 • 未分类 • 阅读 10

在这里插入图片描述

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

beforeCreate    
//详情    //实例创建前，这个时候的 el，data，message 都是 underfined
//场景    //可以加入 loading 事件；

Created
//详情          //实例创建完成后，data、methods 被初始化
//场景          //结束 loading 事件，还可以进行一些数据，资源的请求。（进行ajax请求异步数据的获取、初始化数据）

beforeMount
//详情          //挂载初始之前，完成 el 初始化，render 被初次调用用于生成虚拟dom

Mounted
//详情          //完成挂载
//场景          //dom树已完成渲染到页面，可以进行一些DOM操作

beofreUpdate
//详情          //修改之前调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
//场景          //可以在这个钩子中进一步地更改状态

Updated
//详情          //由于数据更改，重新渲染界面时调用
//场景          //这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行

activated
//详情          //keep-alive 组件激活时调用

deactivated
//详情          //组件停用时调用

beforeDestroy
//详情          //实例销毁之前调用

Destroyed
//详情          //实例销毁后调有。
//场景          //调用后，所有事件都会被解绑，所有的事件监听器会被移动，子实例也会被销毁,还可以执行一些优化操作,清空定时器。

errorCaptured
//详情          //当捕获一个来自子孙组件的错误时被调用。收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。可返回 false 以阻止该错误继续向上传播。

在这里插入图片描述

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/179464.html原文链接：https://javaforall.net