基于Vue实例生命周期(全面解析)
发布时间：2020-12-17 02:50:19 所属栏目：百科 来源：网络整理
导读：前面的话 Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来，根
前面的话Vue实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。本文将详细介绍Vue实例的生命周期 图示下图是Vue实例生命周期的图示  解释 接下来，根据提供的生命周期钩子，对Vue实例各个阶段的情况进行详细说明 【beforeCreate】在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化 【created】在实例创建之后调用。此时已完成数据观测、事件方法，但尚未开始DOM编译，即未挂载到document中 【beforeMount】在mounted之前运行 【mounted】在编译结束时调用。此时所有指令已生效，数据变化已能触发DOM更新，但不保证$el已插入文档 【beforeUpdate】在实例挂载之后，再次更新实例(例如更新 data)时会调用该方法，此时尚未更新DOM结构 【updated】在实例挂载之后，再次更新实例并更新完DOM结构后调用 【beforeDestroy】在开始销毁实例时调用，此刻实例仍然有效 【destroyed】在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁 【activated】需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法 【deactivated】需要配合动态组件keep-live属性使用。在动态组件初始化移出的过程中调用该方法 简单实例 下面写一个简单实例来更清楚地了解Vue实例内部的运行机制
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');
},})
 以上这篇基于Vue实例生命周期(全面解析)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |