Vue生命周期钩子介绍

2024-05-14 10:41:44

1.Vue生命周期8个钩子，4个阶段

初始化阶段 : beforeCreate、created

挂载阶段； beforeMount、mounted

更新阶段 : beforeUpdate、updated

销毁阶段： beforeDestroy、destroyed

2.Vue初始渲染走4个钩子

初始化阶段： beforeCreate、created

挂载阶段： beforeMount、mounted

3.执行顺序

(1)beforeCreate(){} : 初始化Vue实例，但还没有创建data

(2)created(){} ：创建了data，但是还没有创建挂载点el

(3)beforeMount(){} ：el挂载点创建了，但是data数据还没有渲染

(4)mounted(){} ： data数据第一次渲染完毕 (完成初始渲染)，

(5)beforeUpdate(){} ：检测到data数据变化，但是还没有开始重新渲染 (data变了，准备重新渲染中) ，会执行多次

(6)updated ：变化后的data数据，完成渲染到页面（完成重新渲染），会执行多次

(7)beforeDestroy(){} : vue实例销毁即将销毁(解除data与el的关联),之后修改data，页面不会被渲染

(8)destroyed(){} : vue实例已经销毁

Vue生命周期钩子介绍相关推荐

-Vue生命周期钩子
1.1-Vue生命周期钩子介绍 vue生命周期钩子官方文档: 官方文档图解介绍:生命周期图示官方文档详细介绍:vue生命周期钩子介绍 ==vue生命周期钩子介绍 : vue从创建到销毁过程中,会执行 ...
Vue生命周期钩子函数的使用以及应用场景
文章目录前言钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...
vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
Vue 生命周期钩子解读
文章目录 vue 生命周期钩子声明周期图示解析生命周期钩子函数 beforeCreate #created #beforeMount #mounted #beforeUpdate #updated ...
Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
Vue生命周期钩子理解
#Vue生命周期钩子理解 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset= ...
Vue 生命周期钩子简单介绍
文章目录生命周期钩子 1 beforeCreate 2 create 3 beforeMount 4 mount 5 beforeUpdate 6 update 7 activted 8 deact ...
Vue08/Vue 生命周期钩子函数( Vue生命周期11个阶段 )应用场景
Vue生命周期 Vue生命周期介绍 Vue生命周期是指Vue实列对象从创建之初到销毁的过程一. Vue生命周期11个阶段创建 beforeCreate //数据初始化前 created ...
vue生命周期钩子函数（11个）
首先来一波官网的对于vue生命周期的图解. 这一张图对于vue的生命周期已经讲解的特别详细了,但是光靠这一张图还不足于了解它的生命周期,我们需要实践一下,介绍一下vue的钩子函数. 一. 组件创建前后 ...

最新文章

热门文章