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
- 用泛型的IEqualityComparer<T>接口去重复项
- python与office(一)
- Asp.net 后台添加CSS、JS、Meta标签(帮助类)
- 分享一下cookies操作(增、删、改、查)小经验
- [Silverlight 4 RC]WebBrowserBrush概览
- 一个例子理解C#位移
- WCF后续之旅(3): WCF Service Mode Layer 的中枢—Dispatcher
- silverlight 2 Random 随机数解决方案
- 开发中巧用Enum枚举类型
- Jquery 事件冒泡
- Vue2的单元测试与调试技术
- silverlight beta 2 将在本周末发布.
- [Silverlight 4 RC]WebBrowser概览
- 英文域名chosen.com超22万元易主
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法