浅析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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
javascript自执行函数
Feb 10 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
js动态引入的四种方法
May 05 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Js实现粘贴上传图片的原理及示例
Dec 09 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中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
php PDO判断连接是否可用的实现方法
2017/04/03 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
python清理子进程机制剖析
2017/11/23 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
python标识符命名规范原理解析
2020/01/10 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
python requests库的使用
2021/01/06 Python
美国现代家具购物网站:LexMod
2019/01/09 全球购物
sort命令的作用和用法
2013/08/25 面试题
生产部岗位职责范文
2014/02/07 职场文书
职业规划实施方案
2014/06/10 职场文书
森林防火标语
2014/06/23 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
田径运动会广播稿
2015/08/19 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js