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

已于 2023-04-24 15:38:22 修改
阅读量922 收藏
点赞数 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
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue路由+生命周期调用顺序
weixin_45767273的博客
04-21 1626
生命周期 vue实例创建阶段 beforeCreate 实例未创建，不能获取this created 实例创建，可以访问this 可以获取数据赋值data DOM挂载阶段 beforeMount DOM未挂载 mounted DOM已挂载 数据更新阶段 beforeUpdate 数据更新前 Updated 数据更新后 销毁阶段 beforeDestroy 销毁前 destroyed
对Vue beforeRouteEnter 的next执行时机详解
10-18
`next` 函数的执行时机是在组件的 `mounted` 阶段之后，这意味着你可以在回调函数中访问到已经创建并挂载好的组件实例。`next` 通常需要立即调用，但也可以异步调用，只要确保在数据获取或处理完成后再调用，以确保...
vue生命周期？vue生命周期里都做过什么功能？ 页面第一次加载时父子组件生命周期执行的顺序？
GikQxx21_wen的博客
04-22 1339
什么是生命周期？ 生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发 1.1 生命周期函数有哪些？ 创建阶段 - beforeCreate 实例创建之前 这个时候什么都没有 data methods 都不能用 也没有 this - created 创建之后 也是最早的可以使用 data 和 methods 的钩子函数 这个时候有 this 了 - be
beforeRouteEnter中的this和与created的执行顺序
weixin_47437528的博客
11-23 2923
通过beforeRouteEnter获取前一个路由信息，如何在beforeRouteEnter中获取vue实例this，beforeRouteEnter的执行顺序
关于Vue中beforeRouteEnter、beforeCreate、Created的执行时机&this在这三者中的值
like896369216的博客
05-12 5051
beforeRouteEnter、beforeCreate执行时机 this在这三者中的值
vue中获取异步数据
mmiaoChong的博客
12-25 1824
vue中获取异步数据问题描述：问题分析解决办法： 问题描述： 1.在created生命周期内进行异步数据的请求，且将获取到的数据赋值给this.data。 2.此时如果在mounted生命周期里获取this.data是获取不到的 问题分析 因为异步加载需要时间，如果延迟时间是可以获取到数据的，但是问题是不知道需要延迟多久，况且这个方法也不是很好。 那么有没有一个比较优雅的办法进行获取这个异步加载的数据呢 解决办法： 第一种：使用setTimeout() 第二种：在data中设置字段 watch:{ 字段(
vue的生命周期和执行顺序
qq_43886365的博客
07-17 1068
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated 再次进入缓存页面：beforeRouteEnter --> activated --> deactivated
vue 中 beforeRouteEnter 死循环的问题
10-17
主要介绍了vue beforeRouteEnter 死循环的问题,在文章末尾给大家补充介绍了vue中beforeRouteEnter使用的误区，需要的朋友可以参考下
在vue中使用回调函数,this调用无效的解决
10-14
这个问题通常发生在异步操作中，如网络请求，因为这些操作会在不同的上下文中执行，导致`this`不再指向Vue实例。以下是对这个问题的深入解析和解决方案。 首先，让我们分析问题的核心：在Vue组件中，当我们在一个...
beforeRouteEnter、created、mounted的思考和总结
最新发布
水镜先生的博客
11-17 2328
vue的生命周期
vue-router动态传参（$route.params、$route.query）
muzidigbig的博客
11-02 3130
一、动态路径参数 以冒号开头（这种传参的方式会将传的值暴露在地址栏中；$route.params进行接收） 当to后面跟的是其他拼凑出来的值需要让to变为属性的方式传参 即 :to =' ' 效果： 二、get的方式进行传参（这种传参的方式相当于在地址栏？参数=值；$route.query进行接收） 效果： ...
vue的生命周期
qq_47648083的博客
11-04 1046
二、生命周期 1.创建阶段的生命周期函数 首先通过var vm = new Vue({}) 创建一个Vue实例对象，vm是一个空的Vue实例对象 beforeCreate() （初始化之后） 在beforeCreate()生命周期函数执行的时候，vue对象中的data和methods中的数据没有初始化，在beforeCreate()中无法访问data数据和methods中的方法； 2.created() （创建完成 ） 此时data数据和methods中的方法已经初始化好了，也就是说， 3.create
vue生命周期之beforeCreate--获取data中的数据/methods中的方法
简白的博客
12-07 8509
vue生命周期之beforeCreate
Vue中keep-alive时，activated钩子函数比beforeRouteEnter钩子先执行。
SilenceJude的博客
11-28 587
Vue中开启keep-alive时，activated钩子函数比beforeRouteEnter钩子先执行。
页面加载时，vue生命周期的触发顺序
weixin_57913339的博客
04-27 242
路由勾子 (beforeEach、beforeRouteEnter、afterEach)根组件 (beforeCreate、created、beforeMount)组件 (beforeCreate、created、beforeMount)beforeRouteEnter的next的回调。指令 (bind、inserted)根组件 mounted。我们看到执行的顺序为。组件 mounted。
Vue —— 基础（六）（生命周期）
HuoZhiyan 的博客
05-07 383
文章目录一、Vue 生命周期1. 生命周期： 其他叫法。2. 什么是生命周期？3. 生命周期的 this 指向4. 注意事项5. 实例：使用 mounted() 过渡效果 一、Vue 生命周期 1. 生命周期： 其他叫法。 又名：生命周期回调函数、生命周期函数、生命周期钩子。 2. 什么是生命周期？ Vue 在关键时刻帮我们调用的一些特殊名称的函数。 3. 生命周期的 this 指向 生命周期函数中的 this 指向是 vm 或 组件实例对象。 4. 注意事项 生命周期函数的名字不可以更改
vue生命周期
L081773的博客
07-12 216
vue生命周期
监听路由
qq_36262295的博客
11-10 1508
方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或者 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或者 // 监听,当路由发生变化的时
vue中每个生命周期是再什么时候被调用
m0_73727623的博客
01-09 220
vue中每个生命周期是再什么时候被调用
vue 在beforeCreate和created生命周期中使用this
07-12
在Vue的生命周期中，beforeCreate和created是两个阶段。在beforeCreate阶段，Vue实例被创建，但是还没有完成数据的观测、事件的初始化等。所以在这个阶段，无法使用this来访问到data、methods、computed等属性和方法，因为它们还没有被初始化。 而在created阶段，Vue实例已经完成了数据观测和事件初始化，所以可以使用this来访问到data、methods、computed等属性和方法。在这个阶段，你可以对数据进行初始化、发送网络请求、订阅事件等操作。 下面是一个示例代码，展示了在beforeCreate和created生命周期中使用this的区别： ```javascript new Vue({ beforeCreate() { console.log(this.data); // undefined console.log(this.method()); // Error: this.method is not a function }, created() { console.log(this.data); // 'Hello, Vue!' console.log(this.method()); // 'This is a method.' }, data() { return { data: 'Hello, Vue!' } }, methods: { method() { return 'This is a method.' } } }); ``` 在beforeCreate中，由于data和method还没有被初始化，所以无法使用this来访问它们。而在created中，this可以正常访问data和method的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值