官方给的东西肯定很官方啦,不过单看一张图对理解vue生命周期钩子函数来说肯定还是有些难度的。不过各位小伙伴不要着急,本文 以简单直接的实例 来对此图进行理解。
来吧 上代码!代码直接可以直接运行哦。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue-LifeClyle</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app" class="jing"> <p>{{message}}</p> <keep-alive> <jh-component msg="2017年6月9日" v-if="show"></jh-component> </keep-alive> </div> </body> <script> var haohao = { template: '<div>from haohao: {{msg}}</div>', props: ['msg'], deactivated: function() { console.log('component deactivated!'); }, activated: function() { console.log('component activated'); } }; var app = new Vue({ el: '#app', data: function() { return { message: 'jingjing', show: true //控制子组件是否显示 }; }, beforeCreate: function() { console.group('beforeCreate Vue实例创建前的状态————————————————————'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(state); }, created: function() { console.group('created Vue实例创建完毕后状态————————————————————'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(state); }, beforeMount: function() { console.group('beforeMount 挂载前状态————————————————————'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, mounted: function() { console.group('mounted 挂载后状态————————————————————'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, beforeUpdate: function() { console.group('beforeUpdate 更新前状态————————————————————'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); console.log('beforeUpdate = ' + document.getElementsByTagName('p')[0].innerHTML); }, updated: function() { console.group('updated 更新完成状态————————————————————'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); console.log('Updated = ' + document.getElementsByTagName('p')[0].innerHTML); }, beforeDestroy: function() { console.group('beforeDestroy 销毁前状态————————————————————'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, destroyed: function() { console.group('destroyed 销毁完成状态————————————————————'); var state = { 'el': this.$el, 'data': this.$data, 'message': this.message } console.log(this.$el); console.log(state); }, components: { 'jh-component': haohao } }); </script> <style> .jing { font-size: 50px; font-weight: bolder; } </style> </html> 复制代码
创建了一个 app 的Vue根实例,将其挂载到页面 id 为 app 的 Dom 元素上。 然后局部注册了一个组件名为 haohao 并在根实例中将其注册,使其可以在根实例的作用域中使用。 将子组件用
<keep-alive>
包裹,为接下来的测试作准备。
关于
<keep-alive>
的问题就不在这里作过多阐述了,大家可以参考以下两篇文章
1、zhuanlan.zhihu.com/p/96740001
2、www.jianshu.com/p/4b55d312d…
beforeCreate
执行时:data
和el
均未初始化,值为undefined
created
执行时:Vue
实例观察的数据对象 data
已经配置好,已经可以得到app.message
的值,但 Vue
实例使用的根 DOM
元素el
还未初始化beforeMount
执行时:data
和 el
均已经初始化,但从{{message}}
的展示情况可以看出此时 el
并没有渲染数据,这里就是应用的 Virtual DOM
(虚拟Dom)技术,先把坑占住了。到后面 mounted
挂载的时候再把值渲染上去
mounted
执行时:此时 el 已经渲染完成并挂载到实例上
我们在控制台看到component activated
被打印出来了,说明子组件jh-component
被 <keep-alive>
包裹,随 el
的挂载而触发了。
然后我们进行一些操作,在控制台输入 app.show = false
我们再来看看有什么变化,测试结果如下图:
data
的值,所以会触发beforeUpdate
和updated
钩子函数,这里先不管这两个函数,我们看到deactivated钩子已经触发,表示<keep-alive>
已经停用。
同时我们的子组件也会消失。app.message = 'haohao'
beforeUpdate
和updated
触发时,el
中的数据都已经渲染完成,但根据控制台打印的信息beforeUpdate = jingjing
而updated = haohao
可知,只有当updated
钩子被调用时候,组件dom
才会被更新。app.$destroy()
就可以将vue
实例销毁,但是我们发现销毁前和销毁后的实例dom
结构没有任何改变,其实变化已经发生在了其他地方。Vue
实例指示的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
app.message = 'jingjing'
发现结果如下图:data
中的message
属性,但是dom没有任何响应。说明Vue
实例指示的所有东西都已经解除了绑定。终于写完了😄😄😄作者只是一名前端大白(●—●) 此篇文章是第一篇,如果文中有错误请各位大佬谅解一下,指出错误就更好了,让新人多一个学习的机会。😊😊
此篇文章写的很浅显,如果有需要对内容有更深入的学习,可以看看大佬OBKoro写的文章—— Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]