基于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基础资料整理2
Dec 06 Javascript
js 金额文本框实现代码
Feb 14 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
详解javascript new的运行机制
Jan 26 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
详解小程序如何避免多次点击,重复触发事件
Apr 08 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 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 空格,换行,跳格使用说明
2009/12/18 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP第三方登录―QQ登录实现方法
2017/02/06 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
js获取元素外链样式的方法
2015/01/27 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
js图片上传的封装代码
2017/08/01 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
如何开发一个JQuery插件
2016/07/28 面试题
安全生产目标管理责任书
2014/07/25 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
庆祝国庆节标语
2014/10/09 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang