基于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 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
基于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 面向对象详解
2012/09/13 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
php把数组值转换成键的方法
2015/07/13 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[02:39]DOTA2国际邀请赛助威团西雅图第一天
2013/08/08 DOTA
Python设计模式之观察者模式实例
2014/04/26 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
django form和field具体方法和属性说明
2020/07/09 Python
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
2014组织生活会方案
2014/05/19 职场文书
教师暑期培训感言
2014/08/15 职场文书
高考学习决心书
2015/02/04 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Python实现仓库管理系统
2022/05/30 Python