浅析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实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
中止javascript执行的方法
Feb 14 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
window.location.hash知识汇总
Nov 09 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 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错误Warning:mysql_query()解决方法
2015/10/24 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
Python实现聊天机器人的示例代码
2018/07/09 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
Python批量启动多线程代码实例
2020/02/18 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
优秀毕业生求职信范文
2014/01/02 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
民事授权委托书范文
2014/08/02 职场文书
岳麓书院导游词
2015/02/03 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
python 命令行传参方法总结
2021/05/25 Python
python 实现图片特效处理
2022/04/03 Python
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技