Vue中beforeRouteEnter、beforeCreate、Created的执行时机&this在这三者中的值

原创 已于 2023-04-24 15:38:22 修改 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2023-04-06 16:08:19 首次发布
在Vue的生命周期中，beforeRouteEnter、beforeCreate和created钩子函数有不同的执行顺序和上下文。beforeRouteEnter时，组件还未创建，无法访问this。beforeCreate阶段能获取到this，但data未初始化。而到了created阶段，this中包括了data的值，可以完整访问组件实例。

首先从执行时机来看
beforeRouteEnter>beforeCreate>created

this在这三者中的值
beforeRouteEnter
此时组件还没有被创建，所以不能通过this拿到当前的组件实例，页面显示this的值为 undefind 。

beforeCreated

beforeCreate中可以获取到this，但是此时实例未初始化只能获取到this对象内以$开头的键值，若访问data中的属性时，会返回 undefind 。

Created
Created中可以获取到this，并且可以获取到this中data的值

IT-CLASS
关注
vue基础用法&基础原理整理
hangao233的博客
04-06 7万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
星辰迷上大海的博客
03-06 2199
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。
vue绑定事件后获取绑定事件中的this方法
10-18
今天小编就为大家分享一篇vue绑定事件后获取绑定事件中的this方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue的生命周期和执行顺序
qq_43886365的博客
07-17 1351
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated 再次进入缓存页面：beforeRouteEnter --> activated --> deactivated
vue生命周期？vue生命周期里都做过什么功能？ 页面第一次加载时父子组件生命周期执行的顺序？
GikQxx21_wen的博客
04-22 1421
什么是生命周期？ 生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发 1.1 生命周期函数有哪些？ 创建阶段 - beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this - created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了 - be
关于Vue中beforeRouteEnter、beforeCreate、Created的执行时机&this在这三者中的值
like896369216的博客
05-12 5466
beforeRouteEnter、beforeCreate执行时机 this在这三者中的值
Vue beforeRouteEnter 的next执行时机
weixin_33781606的博客
07-07 374
背景 今天在用vue实现界面的时候，想在beforeRouteEnter钩子函数中去获取数据，然后通过next方法设置到跳转页面的实例中，结果发现数据一直没办法在界面渲染的时候赋值，苦思不得其解，遂google之，终寻原因，记录之。 注意 beforeRouteEnter (to, from, next) { console.log(this); //undefined，不能用this来获...
vue框架使用
qq_45645848的博客
01-11 1600
前端vue基础知识总结，汇总
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 1105
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
beforeRouteEnter中的this和与created的执行顺序
weixin_47437528的博客
11-23 3619
通过beforeRouteEnter获取前一个路由信息，如何在beforeRouteEnter中获取vue实例this，beforeRouteEnter的执行顺序
beforeRouteEnter、created、mounted的思考和总结
水镜先生的博客
11-17 2972
vue的生命周期
Vue中keep-alive时，activated钩子函数比beforeRouteEnter钩子先执行。
SilenceJude的博客
11-28 715
Vue中开启keep-alive时，activated钩子函数比beforeRouteEnter钩子先执行。
vue钩子函数beforeRouteEnter
热门推荐
三羊的博客
12-02 1万+
vue钩子函数beforeRouteEnter beforeRouteEnter 函数内部的 this 为 undefined，这是因为 beforeRouteEnter 是在页面创建前就执行的， 先执行 beforeRouteEnter，再执行生命周期钩子函数 beforeCreate、created 等。 beforeRouteEnter 有三个参数，to、from、next to：里面是当前...
Vue生命周期和beforeRouteEnter()/beforeRouteLeave()函数
zhiyun_li1的博客
04-23 1347
找到Vue.js 的官网，简直都是自己陌生的各种语法函数，（下面总结了一下常用的） 先参考vue官网从简单的看起！先了解下vue的生命周期。 2、也许我们从上图中并不能直观的看出生命周期中的函数的具体使命，先简短的用文字了解下： beforeCreate():实例在内存中被创建出来，还没有初始化好data和methods属性。 create():实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模板。 beforeMount():已经完成了模板的编译，还没有挂载到页面中。 mou
vue生命周期之beforeCreate--获取data中的数据/methods中的方法
简白的博客
12-07 9211
vue生命周期之beforeCreate
【Vue】在created钩子函数中: this.$refs为空对象
chen__cheng的博客
04-06 2913
原因: 在created()被调用的时候，此时Vue才完成了数据监测、数据代理等过程，能够访问data、methods数据，但是还未进行模板解析。而ref是在DOM树渲染完成之后生成的，所以this.$refs= {}。 解决： 在mounted()钩子函数中获取，mounted()此阶段DOM树已经渲染完成。 在created()钩子函数中，加入：this.$nextTick()方法，由于此方法是会在DOM 更新循环结束之后执行延迟回调，所以可以在此方法中获取子组件实例。 ...
vue最早可以读取this的生命周期函数
最新发布
youhebuke225的博客
08-25 1591
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。：在实例创建完成后被立即调用。在这一步，实例已完成所有的数据观测、计算属性和方法的配置，但是还没有挂载到DOM，：在挂载开始之前被调用：相关的 render 函数首次被调用。如果你需要在Vue实例创建后立即执行某些操作，比如发送请求获取数据并更新到组件的状态中，那么。因此，如果你需要在Vue实例创建后尽早地访问其属性或方法，但又不需要直接操作DOM，那么。替换，并挂载到实例上去之后调用该钩子。
vue中获取异步数据
mmiaoChong的博客
12-25 1946
vue中获取异步数据问题描述：问题分析解决办法： 问题描述： 1.在created生命周期内进行异步数据的请求，且将获取到的数据赋值给this.data。 2.此时如果在mounted生命周期里获取this.data是获取不到的 问题分析 因为异步加载需要时间，如果延迟时间是可以获取到数据的，但是问题是不知道需要延迟多久，况且这个方法也不是很好。 那么有没有一个比较优雅的办法进行获取这个异步加载的数据呢 解决办法： 第一种：使用setTimeout() 第二种：在data中设置字段 watch:{ 字段(
vue中的this指向问题
qq_45656036的博客
05-19 331
1.vue中各种this指向(重要) .parent查看子组件中的父类,获取结果为单独对象.parent 查看子组件中的父类, 获取结果为单独对象 .parent查看子组件中的父类,获取结果为单独对象.children 查看组件(vue对象的)子类组件, 获取结果为数组 在不同组件中,this代表当前组件, 方法中: methods: 箭头函数指向为window 普通函数指向为 组件本身 created:(任意勾子函数) 箭头函数指向为 组件本身 普通函数指向为 window ...
Vue 2.0生命周期与钩子函数执行时机详解
在beforeCreate阶段，Vue实例刚刚被初始化，此时this已经可以访问，但数据观测（data observer）和事件配置尚未完成，因此$el和$data都不可用，this.$el为undefined，this.$data也未被初始化，无法访问data中定义的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值