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


Posted in Javascript onAugust 16, 2017

前面的话

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

Javascript 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
使用Promise解决多层异步调用的简单学习心得
May 17 Javascript
实例解析jQuery中如何取消后续执行内容
Dec 01 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
基于JQuery的Ajax方法使用详解
Aug 16 #jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 #Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 #Javascript
label+input实现按钮开关切换效果的实例
Aug 16 #Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 #Javascript
vue实现点击图片放大效果
Aug 15 #Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 #jQuery
You might like
PHP一些有意思的小区别
2006/12/06 PHP
PHP语法速查表
2007/01/02 PHP
php获取文件大小的方法
2014/02/26 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
教你php如何实现验证码
2016/01/20 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
jquery将一个表单序列化为一个对象的方法
2013/12/02 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
python实现中文分词FMM算法实例
2015/07/10 Python
详解Django中Request对象的相关用法
2015/07/17 Python
python实现下载指定网址所有图片的方法
2015/08/08 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
Django的CVB实例详解
2020/02/10 Python
提高python代码运行效率的一些建议
2020/09/29 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
教你打造完美的创业计划书
2014/01/06 职场文书
简历自我评价模版
2014/01/31 职场文书
担保书格式
2015/01/20 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang