浅析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 相关文章推荐
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
通过JS获取Request.QueryString()参数的值实现方法
Sep 27 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
JS引用传递与值传递的区别与用法分析
Jun 01 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
JS实现图片预加载无需等待
2012/12/21 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Python如何获取文件路径/目录
2020/09/22 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
MYSQL基础面试题
2012/05/13 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
国税会议欢迎词
2014/01/16 职场文书
2015年护士节慰问信
2015/03/23 职场文书
信息技术研修心得体会
2016/01/08 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android