Vue父子组件生命周期
Vue父子组件生命周期
Vue
实例需要经过创建、初始化数据、编译模板、挂载DOM
、渲染、更新、渲染、卸载等一系列过程,这个过程就是Vue
的生命周期,Vue
中提供的钩子函数有beforeCreate
、created
、beforeMount
、mounted
、beforeUpdate
、updated
、beforeDestroy
、destroyed
,父子组件嵌套时,父组件和子组件各拥有各自独立的钩子函数。
描述
创建过程
创建过程主要涉及beforeCreate
、created
、beforeMount
、mounted
四个钩子函数。
Parent beforeCreate -> Parent Created -> Parent BeforeMount -> Child BeforeCreate -> Child Created -> Child BeforeMount -> Child Mounted -> Parent Mounted
更新过程
更新过程主要涉及beforeUpdate
、updated
两个钩子函数,当父子组件有数据传递时才会有生命周期的比较。
Parent BeforeUpdate -> Child BeforeUpdate -> Child Updated -> Parent Updated
销毁过程
销毁过程主要涉及beforeDestroy
、destroyed
两个钩子函数,本例直接调用vm.$destroy()
销毁整个实例以达到销毁父子组件的目的。
Parent BeforeDestroy -> Child BeforeDestroy -> Child Destroyed -> Parent Destroyed
示例
<!DOCTYPE html>
<html><head><title>Vue父子组件生命周期</title>
</head><body><div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">Vue.component("counter", {props: {count: { type: Number,default: 0},},beforeCreate: function() {console.log("Child", "BeforeCreate");},created: function() {console.log("Child", "Created");},beforeMount: function() {console.log("Child", "BeforeMount");},mounted: function() {console.log("Child", "Mounted");},beforeUpdate: function() {console.log("Child", "BeforeUpdate");},updated: function() {console.log("Child", "Updated");},beforeDestroy: function() {console.log("Child", "BeforeDestroy");},destroyed: function() {console.log("Child", "Destroyed");},template: `<div><div>{{count}}</div></div>`})var vm = new Vue({el: '#app',data: function(){return {count: 1}},beforeCreate: function() {console.log("Parent", "BeforeCreate");},created: function() {console.log("Parent", "Created");},beforeMount: function() {console.log("Parent", "BeforeMount");},mounted: function() {console.log("Parent", "Mounted");},beforeUpdate: function() {console.log("Parent", "BeforeUpdate");},updated: function() {console.log("Parent", "Updated");},beforeDestroy: function() {console.log("Parent", "BeforeDestroy");},destroyed: function() {console.log("Parent", "Destroyed");},template: `<div><counter :count="count"></counter> <button @click="count++">++</button></div>`})
</script></html>
生命周期
Vue
生命周期钩子函数功能示例,其中this.msg
初始化赋值Vue Lifecycle
,在更新过程中赋值为Vue Update
。
beforeCreate
从Vue
实例开始创建到beforeCreate
钩子执行的过程中主要进行了一些初始化操作,例如组件的事件与生命周期钩子的初始化。在此生命周期钩子执行时组件并未挂载,data
、methods
等也并未绑定,此时主要可以用来加载一些与Vue
数据无关的操作,例如展示一个loading
等。
console.log("beforeCreate");
console.log(this.$el); //undefined
console.log(this.$data); //undefined
console.log(this.msg); // undefined
console.log("--------------------");
created
从beforeCreate
到created
的过程中主要完成了数据绑定的配置、计算属性与方法的挂载、watch/event
事件回调等。在此生命周期钩子执行时组件未挂载到到DOM
,属性$el
目前仍然为undefined
,但此时已经可以开始操作data
与methods
等,只是页面还未渲染,在此阶段通常用来发起一个XHR
请求。
console.log("created");
console.log(this.$el); //undefined
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
beforeMount
从created
到beforeMount
的过程中主要完成了页面模板的解析,在内存中将页面的数据与指令等进行解析,当页面解析完成,页面模板就存在于内存中。在此生命周期钩子执行时$el
被创建,但是页面只是在内存中,并未作为DOM
渲染。
console.log("beforeMount");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); // {__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
mounted
从beforeMount
到mounted
的过程中执行的是将页面从内存中渲染到DOM
的操作。在此生命周期钩子执行时页面已经渲染完成,组件正式完成创建阶段的最后一个钩子,即将进入运行中阶段。此外关于渲染的页面模板的优先级,是render
函数 >
template
属性 >
外部HTML
。
console.log("mounted");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Lifecycle
console.log("--------------------");
beforeUpdate
当数据发生更新时beforeUpdate
钩子便会被调用,此时Vue
实例中数据已经是最新的,但是在页面中的数据还是旧的,在此时可以进一步地更改状态,这不会触发附加的重渲染过程。在上述例子中加入了debugger
断点,可以观察到Vue
实例中数据已经是最新的,但是在页面中的数据还是旧的。
// this.msg = "Vue Update";
console.log("beforeUpdate");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Update
console.log("--------------------");
updated
当数据发生更新并在DOM
渲染完成后updated
钩子便会被调用,在此时组件的DOM
已经更新,可以执行依赖于DOM
的操作。
// this.msg = "Vue Update";
console.log("updated");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Update
console.log("--------------------");
beforeDestroy
在Vue
实例被销毁之前beforeDestroy
钩子便会被调用,在此时实例仍然完全可用。
// this.$destroy();
console.log("beforeDestroy");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Update
console.log("--------------------");
destroyed
在Vue
实例被销毁之后destroyed
钩子便会被调用,在此时Vue
实例绑定的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁,组件无法使用,data
和methods
也都不可使用,即使更改了实例的属性,页面的DOM
也不会重新渲染。
// this.$destroy();
console.log("destroyed");
console.log(this.$el); //<div id="app">...</div>
console.log(this.$data); //{__ob__: Observer}
console.log(this.msg); // Vue Update
console.log("--------------------");
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://segmentfault.com/a/1190000011381906
https://www.cnblogs.com/yuliangbin/p/9348156.html
https://www.cnblogs.com/zmyxixihaha/p/10714217.html
Vue父子组件生命周期相关推荐
- vue父子组件生命周期顺序_vue父子组件生命周期执行顺序
Parent -- Child1 -- Child2 装载 parent beforeCreate parent created parent beforeMount child1 beforeCre ...
- vue父子组件生命周期执行顺序_关于Vue组件的生命周期及执行顺序
本文主要讲述了:Vue组件渲染时的生命周期及执行顺序 Vue组件数据变更时的生命周期及执行顺序 Vue组件嵌套时的生命周期及执行顺序 正文 组件渲染时的生命周期 在组件渲染时,每个Vue组件都有4个生 ...
- vue父子组件生命周期执行顺序
生命周期: 一个组件从创建到销毁的整个过程就是生命周期. 生命周期函数(钩子函数): vue框架内置函数,随着组建的生命周期,自动按次序执行. beforeCreate:创建实例之前执行,元素和数据都 ...
- Vue父子组件生命周期的执行顺序
加载渲染过程 父组件先创建,然后子组件创建:子组件先挂载,然后父组件再挂载 即生命周期如下 父beforeCreate 父created 父beforeMount 子beforeCreate 子cre ...
- Vue父子组件生命周期的先后顺序
初次渲染完成触发的声明周期 beforeCreate() ,created() beforeMount(),mounted() 组件的调用顺序是先父后子,渲染完成的顺序是先子后父.组件的销毁操作是先父 ...
- Vue父子组件生命周期触发顺序
父子组件钩子函数执行顺序 父 beforeCreate 父 created 父 beforeMount 子 beforeCreate 子 created 子 beforeMount 子 mounted ...
- day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)...
昨日内容回顾 0. 组件注意事项!!!data属性必须是一个函数!1. 注册全局组件Vue.component('组件名',{template: ``})var app = new Vue({el: ...
- Vue组件生命周期钩子和Vue-Router路由钩子的执行顺序
Vue组件生命周期钩子的执行顺序如下图所示 链接:https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6% ...
最新文章
- Go 学习笔记(41)— Go 标准库之 encoding/base64 (编解码)
- 执行前端测试的必要性
- 【经验分享】非科班出身怎么转行计算机?
- flowable 多实例动态添加人
- 【BZOJ1934】【codevs2341】善意的投票,二分图最小割
- 词根 sent/sens
- 变了,iPhone 12变身iPhone 4模样;下一代只支持单种5G频段?
- PCI、PCI-X、PCI-E AGP区别
- 《架构师》反思:系统可靠性
- 外边距合并(HTML、CSS)
- 用WinZip Pro创建Zip文件
- 如何优雅的关闭Golang Channel?
- 使用instrument-->Allocations进行内存分析
- [Unity实践笔记] 俯视视角人物360°移动脚本
- springboot 系列教程四:springboot thymeleaf配置
- jquery对json的遍历
- 2022胺基化工艺考试试题及答案
- 解除安卓车机禁止安装软件_每次换新机后第一时间会安装的安卓软件
- 人族的对战宝典(LT篇)zt
- 如何使用 PowerPoint 2021 制作演示文稿(PPT)?
热门文章
- Linux读写缓存Page Cache
- ConcurrentProgramming:volatile/构造方法溢出/禁止重排序
- RocketMQ的架构设计详解
- gitlab搭建与使用
- 粤西茂名实现光网全覆盖 智慧城市改变民众生活
- 《Linux KVM虚拟化架构实战指南》——导读
- LabView中,下拉列表和枚举有什么区别?
- (function($){...})(jQuery) 含义
- Python字典(dict)与列表(list)与数组(nbarray)详解
- 北京大学2019年数学分析考研试题