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

已于 2023-04-24 15:38:22 修改
阅读量1k 收藏
点赞数 1
文章标签： vue.js 前端 javascript
于 2023-04-06 16:08:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/it_bar/article/details/129991976
版权

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

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

beforeCreated

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

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

IT-CLASS
关注
Vue面试题汇总（持续更新中）
xieyuleisss的博客
09-11 912
1.什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和Model的对象（桥梁）。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Mo
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 837
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
vue绑定事件后获取绑定事件中的this方法
10-18
今天小编就为大家分享一篇vue绑定事件后获取绑定事件中的this方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于Vue中beforeRouteEnter、beforeCreate、Created的执行时机&this在这三者中的值
like896369216的博客
05-12 5207
beforeRouteEnter、beforeCreate执行时机 this在这三者中的值
vue最早可以读取this的生命周期函数
最新发布
youhebuke225的博客
08-25 1417
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。：在实例创建完成后被立即调用。在这一步，实例已完成所有的数据观测、计算属性和方法的配置，但是还没有挂载到DOM，：在挂载开始之前被调用：相关的 render 函数首次被调用。如果你需要在Vue实例创建后立即执行某些操作，比如发送请求获取数据并更新到组件的状态中，那么。因此，如果你需要在Vue实例创建后尽早地访问其属性或方法，但又不需要直接操作DOM，那么。替换，并挂载到实例上去之后调用该钩子。
Vue beforeRouteEnter 的next执行时机
weixin_33781606的博客
07-07 330
背景 今天在用vue实现界面的时候，想在beforeRouteEnter钩子函数中去获取数据，然后通过next方法设置到跳转页面的实例中，结果发现数据一直没办法在界面渲染的时候赋值，苦思不得其解，遂google之，终寻原因，记录之。 注意 beforeRouteEnter (to, from, next) { console.log(this); //undefined，不能用this来获...
beforeRouteEnter中的this和与created的执行顺序
weixin_47437528的博客
11-23 3200
通过beforeRouteEnter获取前一个路由信息，如何在beforeRouteEnter中获取vue实例this，beforeRouteEnter的执行顺序
beforeRouteEnter、created、mounted的思考和总结
水镜先生的博客
11-17 2569
vue的生命周期
vue2 vue3 js es6 html css 知识点
weixin_71783532的博客
08-03 1088
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...
vue框架使用
qq_45645848的博客
01-11 1255
前端vue基础知识总结，汇总
vue笔记
m0_55546349的博客
05-17 891
如何让flex:1 html:给他以及它的所有父元素设置高度100%； vue: 给app设置高度100% public里index.html也添加body,html{hright:100%} 父元素flex:1;overflow:aoto; 各自overflow:auto; 浏览器自动开启/热更新-端口修改 在项目的根路径下根路径下根路径下根路径下创建一个文件名为vue.config.js module.exports = { devServer: { open: true,
Vue中keep-alive时，activated钩子函数比beforeRouteEnter钩子先执行。
SilenceJude的博客
11-28 621
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 1265
找到Vue.js 的官网，简直都是自己陌生的各种语法函数，（下面总结了一下常用的） 先参考vue官网从简单的看起！先了解下vue的生命周期。 2、也许我们从上图中并不能直观的看出生命周期中的函数的具体使命，先简短的用文字了解下： beforeCreate():实例在内存中被创建出来，还没有初始化好data和methods属性。 create():实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模板。 beforeMount():已经完成了模板的编译，还没有挂载到页面中。 mou
vue生命周期之beforeCreate--获取data中的数据/methods中的方法
简白的博客
12-07 8830
vue生命周期之beforeCreate
【Vue】在created钩子函数中: this.$refs为空对象
chen__cheng的博客
04-06 2794
原因: 在created()被调用的时候，此时Vue才完成了数据监测、数据代理等过程，能够访问data、methods数据，但是还未进行模板解析。而ref是在DOM树渲染完成之后生成的，所以this.$refs= {}。 解决： 在mounted()钩子函数中获取，mounted()此阶段DOM树已经渲染完成。 在created()钩子函数中，加入：this.$nextTick()方法，由于此方法是会在DOM 更新循环结束之后执行延迟回调，所以可以在此方法中获取子组件实例。 ...
vue中获取异步数据
mmiaoChong的博客
12-25 1859
vue中获取异步数据问题描述：问题分析解决办法： 问题描述： 1.在created生命周期内进行异步数据的请求，且将获取到的数据赋值给this.data。 2.此时如果在mounted生命周期里获取this.data是获取不到的 问题分析 因为异步加载需要时间，如果延迟时间是可以获取到数据的，但是问题是不知道需要延迟多久，况且这个方法也不是很好。 那么有没有一个比较优雅的办法进行获取这个异步加载的数据呢 解决办法： 第一种：使用setTimeout() 第二种：在data中设置字段 watch:{ 字段(
vue中的this指向问题
qq_45656036的博客
05-19 283
1.vue中各种this指向(重要) .parent查看子组件中的父类,获取结果为单独对象.parent 查看子组件中的父类, 获取结果为单独对象 .parent查看子组件中的父类,获取结果为单独对象.children 查看组件(vue对象的)子类组件, 获取结果为数组 在不同组件中,this代表当前组件, 方法中: methods: 箭头函数指向为window 普通函数指向为 组件本身 created:(任意勾子函数) 箭头函数指向为 组件本身 普通函数指向为 window ...
vue生命周期四个阶段（created和mount），ref在哪个生命周期中获取
qq_43631129的博客
12-04 1621
vue生命周期中都干什么 vue生命周期四个阶段（created和mount）， ref在哪个生命周期中获取
vue 在beforeCreate和created生命周期中使用this
07-12
在Vue的生命周期中，beforeCreate和created是两个阶段。在beforeCreate阶段，Vue实例被创建，但是还没有完成数据的观测、事件的初始化等。所以在这个阶段，无法使用this来访问到data、methods、computed等属性和方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值