浅析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学习笔记2 函数
Jan 11 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
jQuery中andSelf()方法用法实例
Jan 08 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
JS实现碰撞检测效果
Mar 12 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实现多服务器共享SESSION数据的方法
2007/03/16 PHP
html读出文本文件内容
2007/01/22 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
bootstrap下拉框动态赋值方法
2018/08/10 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
总务岗位职责
2013/11/19 职场文书
微型企业创业投资计划书
2014/01/10 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Redis实现一个账号只能登录一个设备
2022/04/19 Redis