vue生命周期函数可以操作dom_vue生命周期钩子函数
前言
在使用vue开发的过程中,我们经常会接触到生命周期的问题。那么你知道,一个标准的工程项目中,会有多少个生命周期勾子吗?让我们来一起来盘点一下:
根组件实例:8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
组件实例:8个 (beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed)
全局路由钩子:2个 (beforeEach、afterEach)
组件路由钩子:3个 (beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)
指令的周期: 5个 (bind、inserted、update、componentUpdated、unbind)
beforeRouteEnter的next所对应的周期
nextTick所对应的周期
吓到了吗?合计竟然一共有28个周期,是否看得头昏眼花了呢?接下来让我们一起来介绍一下各个周期的通常用途与使用细节吧
组件实例周期
这一块vue2的官方文档有一张图示,我们简要提一下用法和注意
beforeCreate
在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
tip:
此时组件的选项还未挂载,因此无法访问methods,data,computed上的方法或数据
created
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
这是一个常用的生命周期,因为你可以调用methods中的方法、改变data中的数据,并且修改可以通过vue的响应式绑定体现在页面上、获取computed中的计算属性等等。
tip:
通常我们可以在这里对实例进行预处理。
也有一些童鞋喜欢在这里发ajax请求,值得注意的是,这个周期中是没有什么方法来对实例化过程进行拦截的。
因此假如有某些数据必须获取才允许进入页面的话,并不适合在这个页面发请求。
建议在组件路由勾子beforeRouteEnter中来完成。
beforeMonut
在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
tip:
1.在这个周期内,对data的改变可以生效。但是要进下一轮的dom更新,dom上的数据才会更新。
2.这个周期可以获取 dom。 之前的论断有误,感谢@冯银超 和 @AnHour的提醒
3.beforeRouteEnter的next的勾子比mounted触发还要靠后
4.指令的生效在mounted周期之前
beforeUpdate
数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
tip:
1.这一步还可以用this来获取实例。
2.一般在这一步做一些重置的操作。比如清除掉组件中的 定时器 和 监听的dom事件
destroyed
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
全局路由钩子
作用于所有路由切换,一般在main.js里面定义
router.beforeEach
示例
router.beforeEach((to, from, next) => {
console.log(‘路由全局勾子:beforeEach -- 有next方法‘)
next()
})
一般在这个勾子的回调中,对路由进行拦截。
比如,未登录的用户,直接进入了需要登录才可见的页面,那么可以用next(false)来拦截,使其跳回原页面。
值得注意的是,如果没有调用next方法,那么页面将卡在那。
next的四种用法
1.next() 跳入下一个页面
2.next(‘/path‘) 改变路由的跳转方向,使其跳到另一个路由
3.next(false) 返回原来的页面
4.next((vm)=>{}) 仅在beforeRouteEnter中可用,vm是组件实例。
router.afterEach
示例
router.afterEach((to, from) => {
console.log(‘路由全局勾子:afterEach --- 没有next方法‘)
})
在所有路由跳转结束的时候调用,和beforeEach是类似的,但是它没有next方法
组件路由勾子
和全局勾子不同的是,它仅仅作用于某个组件,一般在.vue文件中去定义。
beforeRouteEnter
示例
beforeRouteEnter (to, from, next) {
console.log(this) //undefined,不能用this来获取vue实例
console.log(‘组件路由勾子:beforeRouteEnter‘)
next(vm => {
console.log(vm) //vm为vue的实例
console.log(‘组件路由勾子beforeRouteEnter的next‘)
})
}
这个是一个很不同的勾子。因为beforeRouterEnter在组件创建之前调用,所以它无法直接用this来访问组件实例。
为了弥补这一点,vue-router开发人员,给他的next方法加了特技,可以传一个回调,回调的第一个参数即是组件实例。
一般我们可以利用这点,对实例上的数据进行修改,调用实例上的方法。
我们可以在这个方法去请求数据,在数据获取到之后,再调用next就能保证你进页面的时候,数据已经获取到了。没错,这里next有阻塞的效果。你没调用的话,就会一直卡在那
tip:
next(vm=>{console.log(‘next‘) })
这个里面的代码是很晚执行的,在组件mounted周期之后。没错,这是一个坑。你要注意。
beforeRouteEnter的代码时很早执行的,在组件beforeCreate之前;
但是next里面回调的执行,很晚,在mounted之后,可以说是目前我找到的,离dom渲染最近的一个周期。
beforeRouteLeave
beforeRouteLeave (to, from, next) {
console.log(this) //可以访问vue实例
console.log(‘组件路由勾子:beforeRouteLeave‘)
next()
},
在离开路由时调用。可以用this来访问组件实例。但是next中不能传回调。
beforeRouteUpdate
这个方法是vue-router2.2版本加上的。因为原来的版本中,如果一个在两个子路由之间跳转,是不触发beforeRouteLeave的。这会导致某些重置操作,没地方触发。在之前,我们都是用watch $route来hack的。但是通过这个勾子,我们有了更好的方式。
老实讲,我没用过这个勾子,所以各位可以查看一下文章之前的文档,去尝试一下,再和我交流交流。
指令周期
绑定自定义指令的时候也会有对应的周期。
这几个周期,我比较常用的,一般是只有bind。
bind
只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted
被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
实际上是插入vnode的时候调用。
update
被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
慎用,如果在指令里绑定事件,并且用这个周期的,记得把事件注销
componentUpdated
被绑定元素所在模板完成一次更新周期时调用。
unbind
只调用一次, 指令与元素解绑时调用。
Vue.nextTick、vm.$nextTick
示例:
created () {
this.$nextTick(() => {
console.log(‘nextTick‘) //回调里的函数一直到真实的dom渲染结束后,才执行
})
console.log(‘组件:created‘)
},
nextTick方法的回调会在dom更新后再执行,因此可以和一些dom操作搭配一起用,如 ref。
非常好用,可以解决很多疑难杂症。
场景:
你用ref获得一个输入框,用v-model绑定。
在某个方法里改变绑定的值,在这个方法里用ref去获取dom并取值,你会发现dom的值并没有改变。
因为此时vue的方法,还没去触发dom的改变。
因此你可以把获取dom值的操作放在vm.$nextTick的回调里,就可以了。
vue生命周期函数可以操作dom_vue生命周期钩子函数相关推荐
- vue生命周期函数可以操作dom_vue生命周期钩子函数(详解及使用场景)
![1.beforeCreate (使用频率低) * 在实例创建以前调用 * 没有实例化,数据访问不到 2. created (使用频率高) * 实例被创建完成后调用 * 能拿到数据 * 能修改数据, ...
- 不来看看这些 VUE 的生命周期钩子函数? | 原力计划
作者 | huangfuyk 责编 | 王晓曼 出品 | CSDN 博客 VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化.可以分为:创建.挂载.更新.销毁四 ...
- vue生命周期钩子函数有哪些
每个vue实例从创建到销毁的过程就是vue的一个生命周期,每个阶段都有对应的钩子函数,当我们想在vue的不同时期操作vue实例是,就可以在不同的钩子函数中进行 vue有8种生命周期函数: before ...
- vue生命周期 钩子函数
vue实例的生命周期:从创建到销毁的整个过程 1.钩子函数 vue框架内置函数,随着组件的生命周期阶段,自动执行 使用钩子函数 可以知道vue生命周期到达了什么阶段 作用:在特定的时间点执行特定的操作 ...
- 史上最全的Vue生命周期钩子函数11个
什么是生命周期? 生命周期: Vue是一个构造函数,当执行执行这个函数时,相当于初始化vue实例: 在创建实例过程中,需要设置数据监听,编译模板,将实例挂载到DOM上,数据更新能够让DOM也更新,在这 ...
- Vue生命周期钩子函数的使用以及应用场景
文章目录 前言 钩子函数介绍 beforeCreate(创建前) created(创建后) beforeMounted(挂载前) mounted(挂载后) beforeUpdate(更新前) upda ...
- 教女朋友学习 vue的生命周期钩子函数
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- 详解Vue八大生命周期钩子函数
摘要:Vue为生命周期中的每个状态都设置了钩子函数(监听函数) .每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用. 本文分享自华为云社区<一文带你弄懂Vue八大生命周期钩子函数&g ...
- vue createApp(),mount(),生命周期钩子函数执行顺序
之前一直以为在调用createApp()时执行beforeCreate.created这两个钩子函数,在mount()时才执行beforeMount.mounted这两个钩子函数 但实际上,在crea ...
最新文章
- 为何Redis要比Memcached好用(转)
- Ubuntu16.04下安装sogou输入法
- python显示行数_在idle中如何显示行号
- 什么是内卷?华为内部这篇文章读懂
- 虚拟化之安装Xen实例
- 将选择元素绑定到Angular中的对象
- [云炬创业管理笔记]第6章制定创业行动测试5
- python 标准差_标准差python
- GDCM:gdcm::DirectionCosines的测试程序
- ai外呼营销系统_为了让居民预约口罩少出门,长宁这个街道使用AI技术智能语音外呼系统...
- 灰鸽子病毒手工清除方法
- Boss黑话,老板看完都笑了!
- String类型的算法题(获取子串在主串中出现的次数)和(获取两个字符串中最大相同子串)-Java代码实现
- python基础语法类型_Python基础入门语法和变量类型(一)
- (100)FPGA RAM实现(V实现)
- span标签的取值与赋值
- vb6源码 ymodem_VB爱好者乐园(VBGood)
- 神舟 桌面显示计算机,神舟(Hasee)笔记本电脑重装系统步骤详解
- ajax调用一般应用程序,【Web前端】---js调用本地应用程序
- 一步步用python制作游戏外挂
热门文章
- IDEA同时打开多个项目之解决方法
- Oracle11g ORA-12541
- 升级360极速浏览器,chrome78版本
- 浅谈面向无线通信的微波毫米波无源天线及器件
- Windows11系统任务栏搜索按钮上方出现透明框临时解决方案
- telegtram的通信协议MTproto2.0学习1 之 (tdLib编译使用)
- 北京银行企业级NewSQL数据库赋能金融科技建设
- Docker安装LDAP并集成Springboot测试LDAP
- 关于SQL中PIVOT函数的使用方法
- 常州PHP就业情况,看完2018年平均工资数据分析后,我觉悟了...