浅析Vue 生命周期


Posted in Javascript onJune 21, 2018

Vue 提供了11个钩子函数

1,从创建到销毁发生的一系列状态叫做什么周期,在这个过程中vue会提供状态函数给我们进行

该状态的操作,这个函数叫做钩子函数/生命周期函数/生命周期钩子

浅析Vue 生命周期

过程:

new Vue({})

Vue 实例初始化,读取所有的生命周期函数,并没有执行,不会调用

beforeCreate()

读取属性,计算属性,添加监听 set get方法,读取watch方法

create() 可以操作数据了

判断是否有el配置,或者是被调用了 $mount() 都会走下一步

判断有没有el或者是$mount()作用的dom结构

beforeMount是没有dom结构的

如果有dom结构,读取dom结构 渲染vue指令 {{}},也就是挂载的过程

mounted() 可以操作ref

在这里可以用到 ref操作dom,用法为 ref="id",this.$refs,这里的id为唯一值,手写id会覆盖,但是用v-for 遍历ref,id成了一个数组,不会覆盖。

总结

以上所述是小编给大家介绍的Vue 生命周期,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
COM中获取JavaScript数组大小的代码
Nov 22 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
javascript bom是什么及bom和dom的区别
Nov 26 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
vue解决跨域问题(推荐)
Nov 10 Javascript
vue数组对象排序的实现代码
Jun 20 #Javascript
vue项目实现github在线预览功能
Jun 20 #Javascript
node thread.sleep实现示例
Jun 20 #Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 #Javascript
Vue.use源码学习小结
Jun 20 #Javascript
Vuex入门到上手教程
Jun 20 #Javascript
JavaScript 中的 this 工作原理
Jun 20 #Javascript
You might like
php 之 没有mysql支持时的替代方案
2006/10/09 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
IE6下拉框图层问题探讨及解决
2014/01/03 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
jquery自定义表格样式
2015/11/23 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Django URL传递参数的方法总结
2016/08/28 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Python学习之os模块及用法
2020/06/03 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
农村葬礼主持词
2014/03/31 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
滞留工资返还协议书
2014/10/19 职场文书
综合测评自我评价
2015/03/06 职场文书
商场收银员岗位职责
2015/04/07 职场文书
运动会入场词
2015/07/18 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
python unittest单元测试的步骤分析
2021/08/02 Python