浅析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 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
封装的原生javascript弹出层代码
Sep 24 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
js实现导航跟随效果
Nov 17 Javascript
js简单的分页器插件代码实例
Sep 11 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
node.js监听文件变化的实现方法
2019/04/17 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
解决node终端下运行js文件不支持ES6语法
2020/04/04 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Python定时器实例代码
2017/11/01 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
安踏广告词改编版
2014/03/21 职场文书
关于学习的演讲稿
2014/05/10 职场文书
高一新生军训方案
2014/05/12 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB