这篇文章主要为大家详细介绍了基于Vue实例生命周期(全面解析),具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期
下图是Vue实例生命周期的图示
接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明
在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化
在实例创建之后调用。此时已完成数据观测、事件方法,但尚未开始DOM编译,即未挂载到document中
在mounted之前运行
在编译结束时调用。此时所有指令已生效,数据变化已能触发DOM更新,但不保证$el已插入文档
在实例挂载之后,再次更新实例(例如更新 data)时会调用该方法,此时尚未更新DOM结构
在实例挂载之后,再次更新实例并更新完DOM结构后调用
在开始销毁实例时调用,此刻实例仍然有效
在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑,子实例也被销毁
需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法
需要配合动态组件keep-live属性使用。在动态组件初始化移出的过程中调用该方法
下面写一个简单实例来更清楚地了解Vue实例内部的运行机制
代码如下:
<div id="example">{{message}}</div>
代码如下:
<script>
var vm = new Vue({
el: '#example',
data:{
message:'match'
},
beforeCreate(){
console.log('beforeCreate');
},
created(){
console.log('created');
},
beforeMount(){
console.log('beforeMount');
},
mounted(){
console.log('mounted');
},
beforeUpdate(){
console.log('beforeUpdate');
},
updated(){
console.log('updated');
//组件更新后调用$destroyed函数,进行销毁
this.$destroy();
},
beforeDestroy(){
console.log('beforeDestroy');
},
destroyed(){
console.log('destroyed');
},
})
</script>
以上这篇基于Vue实例生命周期(全面解析)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/3918-0.html
注:关于基于Vue实例生命周期(全面解析)的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。