Vue生命周期钩子函数
下面先附上官网的一张图示,附有注释讲解。随着你的不断学习和使用,它的参考价值会越来越高。
所有的生命周期钩子自动绑定
this
上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如created: () => this.fetchTodos()
)。这是因为箭头函数绑定了父上下文,因此this
与你期待的 Vue 实例不同。
beforeCreate
在实例创建之前,data中的数据,methods、watch、computed里的方法都还不能访问 打印出来全都是undefined。那么问题来了:如何在这个生命周期获取data中的数据呢?
异步方式获取data:this.$nextTick或者setTimeout都行。相当于在初始化前告诉容器,等整个视图都渲染完毕再跑里面的代码。这种方式别说拿data了,拿渲染完DOM都OK~
同步方式获取data: 在beforeCreate前,所有的options都会先存到vm.$options
中, 就是直接从this.$options.data
里去拿。比如this.$options.data()[key]
就好。如下:
export default {name: 'App',data () {return {b: {name: 'clearlove'}}},beforeCreate () {console.log(this.$options.data()['b'], '实例创建之前') //{ name: 'clearlove'} '实例创建之前'}
}
// this.$options.data就是上方的data函数复制代码
但是实际情况中,从来没遇到过需要在组件还没初始化就去拿data的……
created
实例已经创建,可以直接使用实例中的数据和方法,但是还不能对DOM节点进行访问。即$el属性不可见。该阶段允许进行异步请求
<template><div id="app"><div id="nav" ref="myDiv"></div></div>
</template><script>
export default {created () {console.log(this.$refs.myDiv, '实例创建完成') // undefined '实例创建完成'}
}复制代码
beforeMount
相关的 render
函数首次被调用。
mounted
相关的 render
函数首次被调用。DOM节点已经渲染,可以进行DOM操作,比如事件监听。该阶段允许进行异步请求,但是如果是父组件异步获取数据要使用props传递给子组件的话,则要在created里去发异步请求。具体原因看下方父子组件的生命周期
beforeUpdate
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。可以修改data,并不会触发附加的冲渲染过程。这里的$el对象已经修改,但是页面上的数据还没有发生改变。
updated
DOM结构上的数据已经完成更新。若再次修改data,会再次触发beforeUpdate、updated,进入死循环。
beforeDestroy
实例被销毁前调用,也就是说在这个阶段还是可以调用实例的。
实例的销毁,vue实例还是存在的,只是解绑事件的监听和数据与view的绑定,即数据驱动。
destroyed
实例被销毁后调用,所有的事件监听器已被移除,子实例被销毁。
这里再简单说一下父子组件的生命周期:
- 加载渲染过程:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 子组件更新过程:
父beforeUpdate->子beforeUpdate->子updated->父updated
- 父组件更新过程:
父beforeUpdate->父updated
- 销毁过程:
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
总结
Vue的生命周期函数为开发者提供了非常便利的操作。但是善用生命周期才会不踩坑,掌握好Vue的生命周期是非常重要的。它能在很大程度上减少我们日常开发的BUG。
一定需要注意数据获取是个异步过程,而生命周期函数的运行是独立的!只要涉及到DOM更新的操作,推荐大家使用Vue的自带方法$nextTick。这个方法的意思是把回调函数内的操作延迟到下一个DOM更新循环之后。Vue本身会将所有DOM更新的操作放入一个队列里,$nextTick就是会将方法内回调函数的操作延迟到队列里下一个DOM更新后执行。
转载于:https://juejin.im/post/5d28188de51d45773e418b13
Vue生命周期钩子函数相关推荐
- vue生命周期钩子函数的正确使用方式
对于vue生命周期我们还是要先了解清楚,因为不同的生命期用不同的钩子函数,先上图: 遇到的一个问题 在我的项目中,常用的生命周期钩子函数一直都是mounted,对于大部分情况,都是屡试不爽.捷报频传~ ...
- Vue生命周期钩子函数理解与使用场景
Vue生命周期钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程--例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫 ...
- Vue生命周期钩子函数的使用以及应用场景
文章目录 前言 钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...
- vue生命周期 钩子函数
vue实例的生命周期:从创建到销毁的整个过程 1.钩子函数 vue框架内置函数,随着组件的生命周期阶段,自动执行 使用钩子函数 可以知道vue生命周期到达了什么阶段 作用:在特定的时间点执行特定的操作 ...
- 史上最全的Vue生命周期钩子函数11个
什么是生命周期? 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例: 在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这 ...
- 说一下vue生命周期钩子函数有哪些,分别什么时候触发
vue生命周期即为一个组件从出生到死亡的一个完整周期,主要包括以下4个阶段:创建,挂载,更新,销毁 创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂 ...
- Vue08/Vue 生命周期钩子函数( Vue生命周期11个阶段 )应用场景
Vue生命周期 Vue生命周期介绍 Vue生命周期是指Vue实列对象从创建之初到销毁的过程 一. Vue生命周期11个阶段 创建 beforeCreate //数据初始化前 created ...
- vue生命周期钩子函数(11个)
首先来一波官网的对于vue生命周期的图解. 这一张图对于vue的生命周期已经讲解的特别详细了,但是光靠这一张图还不足于了解它的生命周期,我们需要实践一下,介绍一下vue的钩子函数. 一. 组件创建前后 ...
- vue生命周期钩子函数为什么不能使用箭头函数
来自vue官方文档的解释: 所有生命周期钩子的 this 上下文将自动绑定至实例中,因此你可以访问 data.computed 和 methods.这意味着你不应该使用箭头函数来定义一个生命周期方法 ...
- vue生命周期钩子函数有哪些
每个vue实例从创建到销毁的过程就是vue的一个生命周期,每个阶段都有对应的钩子函数,当我们想在vue的不同时期操作vue实例是,就可以在不同的钩子函数中进行 vue有8种生命周期函数: before ...
最新文章
- 谈 Kubernetes 的架构设计与实现原理
- 基于redis的cas集群配置(转)
- 10 分钟入门 AST 代码优化与修改
- kali 设置中文字体
- 让input变成不可编辑状态的方法
- 服务器启动时Webapp的web.xml中配置的加载顺序
- [BZOJ 3531][Sdoi2014]旅行(树链剖分+线段树)
- PTC Creo 8.0.0.0 x64 Multilingual
- 模拟网络丢包的linux,简述Linux模拟丢包
- vue3前端获取文件md5码
- python 折线图标签_如何使用python绘制折线图?
- excel两个指标相关性分析_用Excel做相关性分析
- 【杂耍】联想G40装Win7系统
- 电脑开不了机 ,怎么解决?
- 华为交换机Hybrid接口
- uni-app 中使用iconfont图标
- The Necklace(UVA10054)
- 如何设置网件gs108e_【美国网件 GS108E 交换机开箱总结】插头|接口|散热孔|指示灯_摘要频道_什么值得买...
- 谢处方电磁场与电磁波第4版课后答案
- 声学多普勒剖面流量计(H-ADCP)测流系统
热门文章
- 设计模式之GOF23迭代器模式
- 模板引擎thymeleaf和freemarker
- 一次慢查询暴露的隐蔽的问题
- Spring boot 拦截器(HandlerInterceptor) 与 自定义资源映射虚拟路径,WebMvcConfigurer
- Linux 初级命令
- 洛谷 P1181数列分段SectionI 【贪心】
- webGL学习笔记一
- Unity PlayerPrefs类进行扩展(整个对象进行保存)
- DP(递归打印路径) UVA 662 Fast Food
- jQuery File Upload blueimp with struts2 简单试用