浅析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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
vue-cropper组件实现图片切割上传
May 27 Vue.js
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
德劲1104的电路分析与改良
2021/03/01 无线电
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
python3将变量输入的简单实例
2020/08/19 Python
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
土地转让协议书范本
2014/04/15 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
人大调研汇报材料
2014/08/14 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
收入证明范本
2015/06/12 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
MySQL的索引你了解吗
2022/03/13 MySQL
Golang日志包的使用
2022/04/20 Golang