浅析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 相关文章推荐
javascript支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
JavaScript中的闭包
Feb 24 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
angular4中关于表单的校验示例
Oct 16 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 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
thinkphp实现分页显示功能
2016/12/03 PHP
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
javascript中的括号()用法小结
2014/04/14 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
set在python里的含义和用法
2019/06/24 Python
python通过http下载文件的方法详解
2019/07/26 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
出国留学担保书
2014/05/20 职场文书
励志演讲稿500字
2014/08/21 职场文书
小学见习报告
2014/10/31 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
PyTorch的Debug指南
2021/05/07 Python
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript