Vue-生命周期
生命周期钩子函数
- 生命周期分为三大阶段: 初始化、更新显示、销毁实例
- 初始化阶段的钩子函数
1
2
3
4beforeCreate()实例创建之前: 数据和模板均为获取到
create()实例创建后:最早可访问的数据,但模板并未获取到
beforeMount()数据挂载前, 模板已经获取到但数据为挂载到模板中
mounted()数据挂载后,数据已经挂载在模板中 - 更新阶段的钩子
1
2beforUpdate() 模板更新前: data改变后,更新模板数据前的调用
update() 模板更新后: 数据已经挂到模板中 - 销毁阶段的钩子
1
2beforDestroy()实例销毁之前
destroyed()实例销毁后
- 初始化阶段的钩子函数
- 实例
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> const vm = new Vue({ // el: '#app', data: { msg: 'XiaoxIN' }, beforeCreate(){ // Vue实例创建前被调用,数据和模板均为获取到 console.log('beforeCreate()', this.$el, this.$data) }, created(){ // Vue实例化之后最早可以获取到data数据的钩子, 但模板未获取到 // 建议ajax请求 console.log('created()', this.$el, this.$data) }, beforeMount(){ // 数据挂载之前,获取到模板,但是数据还未挂载到模板上 console.log('beforeMount()', this.$el, this.$data) }, mounted() { // 数据已经挂载在模板中 console.log('Mount()', this.$el, this.$data) }, beforeUpdate(){ // 当data数据在更新之后,去更新模板中的数据前调用 console.log('beforeUpdate()', this.$el.innerHTML, this.$data) }, updated(){ // console.log('updated()', this.$el.innerHTML, this.$data) }, beforeDestroy(){ console.log('beforeDestroy()') }, destroyed(){ console.log('destroyed()') } }).$mount('#app') // 如果实例中没有el元素可以使用$mount()手动指定dom元素 // vm.$destroy() </script> </body> </html> </html>
转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com
文章标题:Vue-生命周期
文章字数:450
本文作者:Aaron
发布时间:2019-12-14, 15:59:02
最后更新:2020-01-06, 23:25:20
原始链接:http://blog.linuxerbulo.com/2019/12/14/Vue-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。