Vue生命周期及各组件间的执行情况
文章目录
- 前言
- 一、Vue的生命周期是什么?
- 二、Vue生命周期中具体过程
- 1.Vue生命周期中的函数
- 创建Vue实例期阶段:
- 运行阶段:
- 销毁阶段:
- 2.加入keep-alive后
- 1)keep-alive的认识:
- 2)keep-alive的用法:
- 各组件间的执行情况
- 1.加载渲染过程
- 2.子组件更新过程
- 3.父组件更新过程
- 4.组件销毁过程
- 5.过程演示
- 总结
前言
Vue的生命周期,各个组件间的执行情况。
注:本文是以Vue2.x版本展开叙述
一、Vue的生命周期是什么?
Vue的组件都是独立存在的,每个组件都要经历他自己的生命周期
。Vue的生命周期是指组件:
创建—>数据初始化—>挂载—>更新—>销毁
简单的来说就是组件从创建到销毁之间的过程
二、Vue生命周期中具体过程
1.Vue生命周期中的函数
生命周期钩子也叫生命周期函数也叫生命周期事件,vue中他自己携带了八个生命周期函数,如下:
创建Vue实例期阶段:
beforeCreate:
实例刚在内存中被创建出来,此时,还没有初始化完成data和methods属性。created:
实例已经在内存中创建完成,此时data和menthods以及创建完成,但没有开始编译模板。beforeMount:
此时完成了模板的编译,但没有进行挂载。mounted:
此时已经完成挂载到指定容器中显示了。
运行阶段:
- beforeUpdate:
状态更新之前调用此函数,此时data中的状态值是最新的,但在界面上并没有得到更新,还没有开始重新渲染DOM节点。 - updated:
实例更新完成后调用此函数,此时以及重新渲染好DOM节点,界面显示数据也是最新的。
销毁阶段:
- beforeDestroy:
实例 销毁前调用的函数,此时,实力还是完全可用的。 - destroyed:
实例销毁后调用,实例锁指示的所有东西都将解绑,所有监听器将移除,所有子实例也将销毁。
生命周期流程图:
代码演示:
var app = new Vue({el: "#app",data: {message: "Hello Vue!"},methods: {changeMessage() {this.message='改变了!'}},beforeCreate() {console.log("---------- 初始化前 beforeCreate-----------");this.message===undefined?console.log('message没拿到'):console.log(this.message);this.$el===undefined?console.log('el没拿到'):console.log(this.$el);},created() {console.log("---------- 初始化完成 created----------");this.message===undefined?console.log('message没拿到'):console.log(this.message);this.$el===undefined?console.log('el没拿到'):console.log(this.$el);},beforeMount() {console.log("---------- 挂载前 beforeMount----------");this.message===undefined?console.log('message没拿到'):console.log(this.message);this.$el===undefined?console.log('el没拿到'):console.log(this.$el);},mounted() {console.log("---------- 挂载完成 mounted----------");this.message===undefined?console.log('message没拿到'):console.log(this.message);this.$el===undefined?console.log('el没拿到'):console.log(this.$el);},beforeUpdate() {console.log("---------- 更新前 beforeUpdate----------");this.message===undefined?console.log('message没拿到'):console.log(this.message);this.$el===undefined?console.log('el没拿到'):console.log(this.$el);},updated() {console.log("---------- 更新完成 updated----------");this.message===undefined?console.log('message没拿到'):console.log(this.message);this.$el===undefined?console.log('el没拿到'):console.log(this.$el);}});
创建阶段运行结果:
可以看到首次加载只会运行前四个周期函数,在挂载前才能拿到el属性,如果要操作DOM节点最早在挂在完成 mounted中操作。
运行阶段运行结果:
2.加入keep-alive后
1)keep-alive的认识:
是vue自带的内部组件,是用来缓存组件的,达到提升性能的目的。
当使用keep-alive后会增加两个生命周期函数:
activated
在 keep-alive 组件激活时调用, 该钩子函数在服务器端渲染期间不被调用。
承担原来created钩子中获取数据的任务
在第一次进入keep-alive包裹的组件时,会调用 beforeCreate、created、beforeMount、mounted、activated;这五个生命周期函数。
当第二次或第n次进入时只会调用activateddeactivated
在 keep-alive 组件停用时调用,该钩子在服务器端渲染期间不被调用。
2)keep-alive的用法:
Props有三个include、exclude、max。
- include
使用字符串或者正则表达式,匹配的组件才会被缓存 - exclude
使用字符串或者正则表达式,匹配的组件都不会被缓存 - max
以数字的形式记录可以缓存多少个组件实例,到达这个值后再次缓存时将销毁最久未使用的组件实例。
各组件间的执行情况
1.加载渲染过程
过程:
父组件beforeCreate --> 父组件created --> 父组件beforeMount --> 子组件beforeCreate --> 子组件created --> 子组件beforeMount --> 子组件mounted --> 父组件mounted
2.子组件更新过程
过程:
子组件beforeUpdate --> 子组件updated
3.父组件更新过程
父组件beforeUpdate --> 父组件updated
4.组件销毁过程
父组件beforeDestroy --> 子组件beforeDestroy --> 子组件destroyed --> 父组件destroyed
5.过程演示
父组件代码
<template><div style="border: 2px #1E1E1E; height: 500px;width: 500px;background-color: blueviolet; text-align: center"><span>{{message}}</span><button @click="changef" >父组件改变</button><Son></Son><button @click="destroy">点击销毁</button></div>
</template><script>
import Son from './components/Son.vue'export default {name: 'App',components: {Son},data() {return {message: "父组件"}},methods: {changef(){this.message='父组件改变了'},destroy(){this.$destroy();console.log('销毁完成');}},beforeCreate() {console.log("---------- 父组件初始化前 beforeCreate-----------");},created() {console.log("---------- 父组件初始化完成 created----------");},beforeMount() {console.log("---------- 父组件挂载前 beforeMount----------");},mounted() {console.log("---------- 父组件挂载完成 mounted----------");},beforeUpdate() {console.log("---------- 父组件更新前 beforeUpdate----------");},updated() {console.log("---------- 父组件更新完成 updated----------");},beforeDestroy(){console.log('---------- 父组件销毁前 beforeDestroy----------');},destroyed(){console.log('---------- 父组件销毁后 destroyed----------')}
}
</script>
子组件代码
<template><div><div style="border: 2px #1E1E1E; height: 200px;width:200px;background-color: aqua;"><span>{{message}}</span><button @click="changes">子组件改变</button></div></div>
</template><script>
export default {// eslint-disable-next-line vue/multi-word-component-namesname: 'Son',props: {},data() {return {message: "子组件"}},methods: {changes(){this.message='子组件改变了'}},beforeCreate() {console.log("---------- 子组件初始化前 beforeCreate-----------");},created() {console.log("---------- 子组件初始化完成 created----------");},beforeMount() {console.log("---------- 子组件挂载前 beforeMount----------");},mounted() {console.log("---------- 子组件挂载完成 mounted----------");},beforeUpdate() {console.log("---------- 子组件更新前 beforeUpdate----------");},updated() {console.log("---------- 子组件更新完成 updated----------");},beforeDestroy(){console.log('---------- 子组件销毁前 beforeDestroy----------');},destroyed(){console.log('---------- 子组件销毁后 destroyed----------')}
}
</script>
加载渲染:
更新阶段:
销毁阶段:
总结
- 生命周期:
- 又名:生命周期回调函数、生命周期函数、生命周期钩子。
- 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。
- 生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
- 生命周期函数中的this指向是vm 或 组件实例对象。
- 常用的生命周期钩子:
- mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
- beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
- 关于销毁Vue实例:
- 销毁后借助Vue开发者工具看不到任何信息。
- 销毁后自定义事件会失效,但原生DOM事件依然有效。
- 一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了。
Vue生命周期及各组件间的执行情况相关推荐
- Vue生命周期与自定义组件
自定义组件: Element 组件其实就是自定义的标签.例如<el-button> 就是对<button>的封装. 本质上,组件是带有一个名字且可复用的 Vue 实例,完全可以 ...
- Vue 生命周期钩子解读
文章目录 vue 生命周期钩子 声明周期图示解析 生命周期钩子函数 beforeCreate #created #beforeMount #mounted #beforeUpdate #updated ...
- Vue生命周期及组件
目录 Vue 生命周期钩子 钩子函数的由来 生命周期钩子函数 生命周期图示 钩子函数测试 添加组件展示: 组件数据更新: 没建任务, 没有任务销毁, 看不到实际的效果. 创建定时任务销毁定时任务 Vu ...
- Vue 学习笔记(2)Vue 生命周期、组件
Vue Vue 生命周期 Vue 中组件(Component) 全局组件的开发 局部组件的开发 组件中 props 的使用 在组件上声明静态数据传递给组件内部 在组件上声明动态数据传递给组件内部 pr ...
- vue生命周期,组件,slot替换,tab切换,简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...
- vue 组件,props 属性 ,Vue 生命周期
本文涉及3个内容: 1.vue 组件: 目录结构: 源码分析如下: <div id="container"><h3>爱吃什么水果? app 实例</ ...
- vue hot true 不起作用_从源码解读 Vuex 注入 Vue 生命周期的过程
第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会 ...
- 详解vue生命周期(重点!!)
首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉: 可以看出在vue--整个的生命周期中会有很多 ...
- Vue 生命周期记录_学习笔记
官方给出的设计图入戏 为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...
最新文章
- 802.1x------2
- Android:你不知道的 WebView 使用漏洞
- Ext4核心组件Grid的变化及学习(3):可编辑的grid
- jQuery和MooTools的真正区别
- 软件设计的第一性原理:结构化抽象
- 上古时期(大雾)的数据结构pdf
- c++rpg黑框游戏_c++实现简单RPG对战游戏的代码.doc
- 电磁波与电磁信号、生活中的电磁波
- Python 爬取QQ音乐个人单曲排行榜
- 阿里云服务器租用价格表分享(北京地域、入门级、windows系统)
- Android屏幕共享-传输图片
- 软件测试的未来:2021年需要关注的15大软件测试趋势
- win10 64位注册TeeChart8.ocx
- c++并发编程:迅雷笔试题
- 百度AI人脸识别怎么实现,图片识别,文字识别,活体检测
- nginx——keepalived
- Unity之使用LitJson做游戏存档
- 谁小时候没有计算机课,你的童年电脑记忆里有它们吗?
- 【嵌入式04.2】STM32F103C8T6的简易流水灯仿真(寄存器实现+STM32CubeMX实现)
- vs2010 vc jsoncpp 编译要点
热门文章
- 多物理场仿真软件COMSOL Multiphysics的安装使用
- sqlmap超详细讲解
- EATool-实用型CAD/GIS集成勘测软件
- 同为(TOWE)携手某防化研究所共筑防雷安全体系
- 渗透测试-逻辑漏洞出现场景、利用方式总结
- RBA验厂辅导,RBA VAP认证最终的评分是要通过给予的权重进行计算的
- Linux打假,“拿来认定论”显露原形
- 一行代码解决scp在Internet传输慢的问题
- 2014 年最热门的国人开发开源软件TOP 100
- html5实现单点登录,图文并茂,为你揭开“单点登录“的神秘面纱