vue生命周期及其应用场景_介绍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

0 人点赞