目录
首先,我们了解一下"生命周期"这个词。
通俗的来说,生命周期就是一个事务从出生到消失的过程。例如,一个人从出生到去世。在vue中,vue的生命周期是指,从创建vue对象到销毁vue对象的过程。
钩子函数
【解释】:
钩子函数是Vue框架中内置的一些函数,随着Vue的生命周期阶段,自动执行
【作用】:特定的时间,执行特定的操作
【分类】:四大阶段,八大方法
阶段 方法名 方法名
初始化 beforeCreate created
挂载 beforeMount mounted
更新 beforeUpdate updated
销毁 beforeDestroy destroyed
Vue生命周期之初始化阶段【图 示】:
new Vue(): Vue实例化对象(组件也是一个的vue实例化对象)
Init Events & Lifecycle:初始化事件和生命周期函数
beforeCreate:生命周期函数被执行此时不能访问data和menthods等中的东西
Init injections&reactivity:vue内部添加data和methods等
created:生命周期钩子函数被执行,实例创建此时能访问data和menthods等中的东西
接下来开始编译模板:开始分析
Has el option? :是否有el选项 – 检查要挂到哪里
没有. 调用$mount()方法
有, 继续检查template选项
【el选项挂载点图解】:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <!-- 容器 --> <div id="app">{{msg}}</div> <script> // 整个页面只能有一个Vue实例对象 let vm = new Vue({ el: "#app", data: { msg: "hello", }, methods: {}, }); </script> </body> </html>
Vue生命周期之挂载阶段
【图解挂载阶段】:
template选项检查:
有:编译template返回render渲染函数
无:编译el选项对应标签作为template(要渲染的模板)vue工程项目不支持
虚拟DOM挂载成真实DOM之前:
beforeMount :生命周期钩子函数被执行
Create vm$el and replace "el" with it:把虚拟DOM和渲染的数据一并挂到真实DOM上
挂载完毕,mounted:生命周期钩子函数被执行
Vue生命周期之更新阶段【更新图解】:
当data里数据改变, 更新DOM之前,beforeUpdate – 生命周期钩子函数被执行
此时获取不到更新的真实dom
Virtual DOM re-render and patch:虚拟DOM重新渲染, 打补丁到真实DOM
updated – 生命周期钩子函数被执行
当有data数据改变 – 重复这个循环
Vue生命周期之销毁阶段
【图解销毁】:
当$destroy()被调用:比如组件DOM被移除(例v-if)
beforeDestroy:生命周期钩子函数被执行
拆卸数据监视器、子组件和事件侦听器
实例销毁后, 最后触发一个钩子函数
destroyed: 生命周期钩子函数被执行
代码执行:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue的数据模型</title> <script src="../js/vue.js"></script> </head> <body> <div id="app"> {{msg}} <button @click="test">按钮</button> <ul id="My"> <li>111</li> </ul> </div> <script> let vm = new Vue({ el: "#app", data: { msg: "hello", // time: new Date(), msg: true, }, methods: { test() { console.log("点击按钮-----"); }, }, //钩子函数,生命周期,在beforeCreate这个阶段, //现在属性msg数据还没有绑定到实例对象vm上,所以数据不能输出来 //钩子函数在new Vue()之后执行 Vue内部给实例添加了一些属性(data)和方法(methods) //钩子函数在data和methods之前执行 beforeCreate() { //属性或方法声明了,但没有和实例绑定 console.log( "beforeCreated函数执行了,---但此时获取不到实例内的属性和方法", this.msg ); //输出:undefined }, //生命周期,在created这个阶段属性msg数据绑定到vm实例对象上 //data和methods之后执行 created() { //属性和方法绑定到实例上,可以通过实例进行调用 console.log( "created执行了,---此时可以获取data和methods中的变量值", this.msg ); //输出:'hello }, /* 2.挂载 */ //虚拟dom挂载成真实dom之前,不可以操作dom //使用场景,预处理data,不会触发update钩子函数 beforeMount() { console.log( "beforeMount执行了,---但此时获取不到真实的DOM节点", "挂载之前" ); console.log(document.getElementById("app")); }, //虚拟dom挂载完毕变成真实dom,此处可以可以操作dom节点 mounted() { console.log("mounted执行了,---此时可以获取到真实的DOM", "挂载后"); console.log(document.getElementById("app")); }, /*2.更新*/ //更新前 beforeUpdate() { console.log(document.querySelectorAll("#My>li")); console.log( "beforeUpdate函数执行了,---此时获取不到更新的真实DOM", this.msg ); }, //更新后 //场景:获取到更新的真实DOM节点 updated() { console.log(document.querySelectorAll("#My>div")); console.log( "update函数执行了,---此时可以获取到更新的真实DOM", this.msg ); }, /*销毁*/ //销毁监听 beforeDestroy() { console.log("beforeDestroy函数执行了", this.msg); }, destroyed() { console.log("destroy函数执行了", this.msg); }, }); setInterval(() => { vm.$destroy(); }, 5000); </script> </body> </html>
输出结果解释:
因为像更新一样,更新的时间很短很快,在beforeUpdate和updated里面都能访问到修改后的
挂载的时间也很快,很短,当然显示的也很快,所以显示并不一定能显示dom节点出来或者dom节点都可以显示出来,亦或者挂载前显示不出来 挂载后就显示出来了
Vue生命周期(初始阶段、挂载阶段、更新阶段、销毁阶段)
于 2022-05-18 23:13:30 首次发布
本文详细介绍了Vue.js的生命周期,包括初始化、挂载、更新和销毁四个阶段,并通过图解和代码示例阐述了每个阶段的钩子函数及其执行顺序。在初始化阶段,Vue实例创建并设置数据;挂载阶段涉及虚拟DOM的生成和真实DOM的挂载;更新阶段主要处理数据变化后的DOM更新;销毁阶段则涉及组件的清理工作。同时,文章还展示了如何在不同生命周期钩子中操作DOM和数据。
摘要由CSDN通过智能技术生成