基于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实例内部的运行机制

<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实例生命周期(全面解析)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# vue实例的生命周期 # Vue实例中生命周期created和mounted的区别详解 # 详解Vue 实例中的生命周期钩子 # 深入理解Vue生命周期、手动挂载及挂载子组件 # Vue 2.0中生命周期与钩子函数的一些理解 # Vue.js实例方法之生命周期详解 # Vuejs入门教程之Vue生命周期 # 数据 # 手动挂载 # 指令 # 过滤器 # vue组件生命周期详解 # Vue2.0生命周期的理解 # vue生命周期和react生命周期对比【推荐】 # Vue的生命周期操作示例 # 过程中 # 给大家 # 绑定 # 在此 # 我们可以 # 希望能 # 详细说明 # 详细介绍 # 这篇 # 都已 # 但不 # 结束时 # 小编 # 大家多多 # 运行机制 # 已能 # 移出 # 文档 # 经解 # style

返回目录在线咨询

上一篇：网站服务器托管费用每月需多少？如何合理规划预算？
下一篇：什么是敏捷开发_SEO优化教程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

基于Vue实例生命周期(全面解析)

您的项目需求