基于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 获取图片颜色
Apr 05 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
Mar 13 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
js简单粗暴的发布订阅示例代码
Jan 23 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购物网站支付paypal使用方法
2010/11/28 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
smarty简单应用实例
2015/11/03 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
js function定义函数使用心得
2010/04/15 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
初识Node.js
2015/03/20 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
Python是编译运行的验证方法
2015/01/30 Python
Python代码调试的几种方法总结
2015/04/15 Python
python中dir函数用法分析
2015/04/17 Python
Python版微信红包分配算法
2015/05/04 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python实现的绘制三维双螺旋线图形功能示例
2018/06/23 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Python如何实现邮件功能
2020/05/27 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
会计实习生工作总结的自我评价
2013/10/07 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
创业计划书之宠物店
2019/09/19 职场文书
python 中的@运算符使用
2021/05/26 Python
Nginx配置Https安全认证的实现
2021/05/26 Servers
Python自动化之批量处理工作簿和工作表
2021/06/03 Python