vue生命周期实例小结


Posted in Javascript onAugust 15, 2018

本文实例分析了vue生命周期。分享给大家供大家参考,具体如下:

每个Vue实例都存在完整的生命周期,经历从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。如下图所示

vue生命周期实例小结

钩子函数

vue的完整生命周期可分为三个阶段:初始化阶段、运行阶段和销毁阶段。共存在很多钩子函数,他们在vue生命周期不同的阶段进行操作,列举如下:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

钩子函数说明

  • beforeCreate

通过new Vue() 创建vue实例,vue的生命周期便拉开了序幕,首先会执行beforeCreate钩子函数。此时的vue实例只是一个空壳,还未挂载DOM元素,无法访问到数据和真实的dom,一般不做操作。

  • created

这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数和不会触发其他钩子函数,一般可以在这里做初始数据的获取。

  • beforeMount

在这个函数中虚拟dom已经创建完成(马上就要渲染),这里也可以更改数据,不会触发updated,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数。

  • mounted

在这个函数调用时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了,可以在这里操作真实dom等事情。

  • beforeUpdate

当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。

  • updated

当更新完成后,执行updated,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom。

  • beforeDestroy

当通过某种方式调用$destroy方法后,立即执行beforeDestroy函数做一些善后工作,如清除计时器、清除非指令绑定的事件等。

  • destroyed

组件的数据绑定、监听等去掉后只剩下dom空壳,此时执行destroyed。当然,也可以在这里完成上述操作。

vue的生命周期:从出生到加载 到 销毁 有一套完整的生命周期过程
能够让我们进行在不同时期去写不同的代码 去做不同的事情

钩子函数:就是不同的生命周期 vue给我们暴露出来的 回调函数

示例:

var vn = new Vue({
el:'.box',
data:{
msg:'<h1>呵呵</h1>'
},
beforeCreate:function() {
alert("实例要创建了,要开始表演了");
},
created:function() {
alert('vue实例已经new出来了,方法和属性还没有编译');
},
beforeMount:function() {
alert('vue实例已经创建完成,马上要执行内部属性和方法的编译');
},
mounted:function() {
alert('对象和属性已经编译完成');
},
beforeUpdate:function() {
alert('数据马上更新,没保存赶紧保存');
},
updated:function() {
alert('数据已经更新');
},
beforeDestroy:function() {
alert('vue实例已经走到尽头了');
},
destroyed:function() {
alert("vue实例永远活在我们心中!!!");
}
})

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
HTML上传控件取消选择
Mar 06 Javascript
js Math 对象的方法
Sep 01 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
Oct 13 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
详解vue-router基本使用
Apr 18 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
JavaScript作用域链实例详解
Jan 21 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
layui获取多选框中的值方法
Aug 15 #Javascript
layui radio性别单选框赋值方法
Aug 15 #Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 #Javascript
LayUI表格批量删除方法
Aug 15 #Javascript
layui中table表头样式修改方法
Aug 15 #Javascript
详解redux异步操作实践
Aug 15 #Javascript
解决Layui数据表格中checkbox位置不居中的方法
Aug 15 #Javascript
You might like
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
JS判断两个时间大小的示例代码
2014/01/28 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
python列表推导式操作解析
2019/11/26 Python
python 读取二进制 显示图片案例
2020/04/24 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
三字经教学反思
2014/04/26 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
平面设计专业求职信
2014/08/09 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
退休欢送会主持词
2015/07/01 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python