vue 生命周期详解 (附代码)
一、 vue的生命周期是什么
vue每个组件都是独立的,都有自己的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,就是一个组件的生命周期。
一个组件首次加载时,也就只执行 创建、数据初始化到挂载。
生命周期给了用户在不同阶段添加自己的代码的机会
二、一个组件生命周期的全过程
首先得 new Vue() 实例化一个vue实例。
这时会执行初始化函数 :初始化生命周期函数 initLifecycle()、初始化事件 initEvent()、定义createElement函数 initRender()。
1. 执行 beforeCreated()
beforeCreated执行后,开始定义data数据、方法和事件,并完成数据劫持observe以及给组件实例配置watcher观察者实例。 这样当数据发生变化以后,才能感知数据的变化,完成页面的渲染。
2. 执行 created() ,此时已经可以拿到data和method下的方法 ,但是页面还没渲染出来
created执行后,如果没有实例对象el,会等待调用$mount(el),调用后$mount(el)后判断是否有template,如果有实例对象el,也会判断是否有template参数,拿到后template会转成render函数
3.执行 beforeMount()
beforeMount执行后,首先会产生一个虚拟dom,当render函数被渲染时就会产生真实的dom。真实的dom会替换掉原有的编译模板template,生成一个真正可用的HTML
4. 执行 mounted() 生命周期属性 _isMounted被置为true。另外我们是可以操作dom的,因为dom这时候已经渲染完成了
ok 到这了如果数据不变化的话,其实不用也不会执行beforeUpdate 和 update
5. 执行 beforeUpdate() 会重新生成一个新的虚拟dom,然后最拿这个最新的虚拟dom和原来的虚拟dom进行diff运算,从而更新render函数的最新数据,再将更新后的render重新渲染成真实dom,也就是数据更新
6. 执行 updated() ,这里可操作dom,并拿到最新一次更新的dom
ok 如果说vm.$destory()不被调用其实 beforeDestory 和 destory不用也不会执行
7. 执行 beforeDestory() 此时还能操作dom
beforeDestory执行后,会做一系列销毁,接触各种数据引用,移除事件监听,删除组件_watcher,删除子实例,删除自身self,同时将_isDestroyed设置为true
8. 执行 destory() 销毁已完成
ps:执行mounted和updated,不需要等所有的子组件都挂载完成,如果希望所有的视图都更新完后在做点什么事的话,最好在mounted和updated中加个$nextTick()。要做的事放在$nextTick()里
代码演示:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><p>{{ message }}</p><button @click="changeMessage">改变Message</button></div>
</body>
<script>var app = new Vue({el: "#app",data: {message: "Hello Vue!"},methods: {changeMessage() {this.message = 'goodbye world'}},beforeCreate() {console.log("~~~~~~ 初始化前 ~~~~~~");console.log(this.message);console.log(this.$el);},created() {console.log("~~~~~~ 初始化完成 ~~~~~~");console.log(this.message);console.log(this.$el);},beforeMount() {console.log("~~~~~~ 挂载前 ~~~~~~");console.log(this.message);console.log(this.$el);},mounted() {console.log("~~~~~~ 挂载完成 ~~~~~~");console.log(this.message);console.log(this.$el);},beforeUpdate() {console.log("~~~~~~ 更新前 ~~~~~~");console.log(this.message);console.log(this.$el);},updated() {console.log("~~~~~~ 更新完成 ~~~~~~");console.log(this.message);console.log(this.$el);}});
</script></html>
控制台打印截图(可以暂时注释methods 代码,即能看到截图效果):
可以看到,首次加载,只经历了创建前后、挂载前后 4个生命周期。
另外挂载前我们看到的el 其实还是模板template 到挂载完成就渲染成真实的dom并替换了原来的模板。
参考学习:
超详细vue生命周期解析(详解)_ら陈佚晨的博客-CSDN博客_vue生命周期
谈谈vue生命周期-看了这篇你就懂了 - 简书
vue 生命周期详解 (附代码)相关推荐
- Vue生命周期详解 对应代码解析
-使用GitHub阅览 对于Vue的实例,比如 const app = new Vue({...}) 浏览器解析到这段代码的时候,自动执行beforeCreate => created => ...
- 1.vue生命周期详解(2020.12.05)
vue生命周期,直接上官方图 补一下引用vue的链接( src = "https://cdn.bootcss.com/vue/2.4.2/vue.js) 要明确生命周期,我们必须从钩子下手: ...
- vue 生命周期 详解
详解Vue Lifecycle 先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称 ...
- Vue生命周期详解(图解)
程序员学习必备书籍推荐: 首先我们对Vue生命周期官方给出的图进行详细解释 vue生命周期详细图解 什么是生命周期? 简而言之:从生到死的过程,从Vue实例创建-运行-销毁的过程 Vue实例有一个完整 ...
- Vue系列之vue生命周期详解
文章の目录 1.什么是 vue 生命周期 2.生命周期钩子函数 2.1.beforeCreate(创建前) 2.2.created(创建后) 2.3.beforeMount(挂载前) 2.4.moun ...
- 【Vue】 Vue生命周期详解
每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期.在这个过程中,它经历了从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 通过这张流程图已经可以清晰的 ...
- vue生命周期详解、钩子函数的调用(简单易懂)
定义:vue的生命周期是指vue实例从初始化创建到实例销毁的过程.期间会有8个钩子函数的调用. vue的钩子函数图解: vue的钩子函数使用总结: 1.beforeCreate(创建前):before ...
- 【Vue生命周期详解】
细谈Vue声明周期 什么是生命周期? Vue的生命周期 beforeCreate( 创建前 ): created ( 创建后 ): beforeMount: mounted: beforeUpdate ...
- 【vue】vue中axios的使用及vue生命周期详解_07
目录 一. axios请求 二. 生命周期
最新文章
- 传承or创新 ?解密分布式数据库自研修炼之路
- VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法...
- Golang基础之数组
- mfp 服务器控制中心,小身材大作用 固网USB打印服务器评测
- 二阶振荡环节的谐振频率_【干货分享】晶体谐振器振荡频差的原因及对策
- Python类的结构及属性的获取机制
- 陕西专科学校王牌计算机专业,陕西省高职专科院校排名+王牌专业
- Linux学习Vim使用及账号用户管理
- Android学习之自定义标题栏
- linux常用命令整理1
- python读取bmp文件,go 读取BMP文件头二进制读取方式
- [Django学习] Django基础(8)_富文本编辑器
- 页面局部ajax文件上传,页面通过ajax实现文件上传功能
- 计算机控制系统a卷-答案,微型计算机控制技术试卷附标准答案A
- 深度学习与卷积神经网络
- 程序员被拖欠工资欲删库跑路,网友:还有没有职业素养
- 易基因|病毒抗性:全基因组DNA甲基化揭示草鱼年龄相关病毒易感性的表观遗传机制
- 解决echarts中地图重叠问题
- 能够摧毁你的只有你自己
- umi创建简单的登录界面
热门文章
- linux无线通用驱动程序,CentOS 安装 Broadcom BCM43225 无线网卡驱动程序
- 用flash制作相册的源码(as3 xml 图片浏览)
- Android图片系列-2.Android App图片压缩、裁剪分析整理
- Fastjson处理复杂层级关系的json对象
- 消除E680I/E680/E680G/A780手机联网提示框
- FL Studio2023中文绿色版编曲宿主软件
- iOS开发 获取设备参数
- Computer Systems Security
- 基于SpringBoot的仿饿了吗外卖APP设计与实现
- 生产管理:模具管理系统