浅析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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
JavaScript中的Window窗口对象
Jan 16 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
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的一个登录的类 [推荐]
2007/03/16 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
js文件中调用js的实现方法小结
2009/10/23 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
jQuery检测某个元素是否存在代码分享
2015/07/09 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
Python入门必须知道的11个知识点
2018/03/21 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
python 的topk算法实例
2020/04/02 Python
解决python Jupyter不能导入外部包问题
2020/04/15 Python
Keras中 ImageDataGenerator函数的参数用法
2020/07/03 Python
企业厂长岗位职责
2013/12/17 职场文书
给女朋友的道歉信
2014/01/10 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
汇报材料怎么写
2014/12/30 职场文书
小学教师教育随笔
2015/08/14 职场文书
学生会干部任命书
2015/09/21 职场文书
python某漫画app逆向
2021/03/31 Python
nginx部署多前端项目的几种方法
2021/05/25 Servers
JVM之方法返回地址详解
2022/02/28 Java/Android