基于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单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
大家在vue项目中当删除或者增加一条记录的时候希望当前页面可以重新刷新，但是vue框架自带的router是不支持刷新当前页面功能,所以本文就给大家分享了七种vue实现当前页面刷新的方法,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue 组件基础知识的相关资料，帮助大家更好的理解和使用vue的组件，感兴趣的朋友可以了解下2021-01-01
实例详解Vue项目使用eslint + prettier规范代码风格
这篇文章主要介绍了Vue项目使用eslint + prettier规范代码风格,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了Vue富文本插件(quill-editor)的使用及说明，具有很好的参考价值，希望对大家有所帮助。2023-02-02
这篇文章主要介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
在Vue.js应用开发中,列表数据的联动是一个常见的需求,这种联动可以用于多种场景,例如过滤筛选、关联选择等,本文将详细介绍如何在Vue项目中实现两个列表之间的数据联动,并通过多个具体的代码示例来帮助读者理解其实现过程,需要的朋友可以参考下2024-10-10
vite.config.js是Vite框架中的配置文件,用于配置项目的构建和运行时的行为,下面这篇文章主要给大家介绍了关于vite项目vite.config.js详细配置的相关资料,需要的朋友可以参考下2023-05-05
Vue element-ui中表格过长内容隐藏显示的实现方式
在Vue项目中,使用ElementUI渲染表格数据时,如果某一个列数值长度超过列宽,会默认换行,造成显示不友好,下面这篇文章主要给大家介绍了关于Vue element-ui中表格过长内容隐藏显示的实现方式,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue组件代码分块和懒加载讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论