详解vue beforeRouteEnter 异步获取数据给实例问题

场景: vue-router 路由钩子 beforeRouteEnter 可以用来在初始进入页面前,http 异步获取数据 mockData ,预先判断是进入 A 页、还是 B 页,还是留在本页;而如果留在本页的话,还需要在 mounted 根据 mockData 来判断显示哪种状态(可以在本页面实例创建后,重新发起 http 请求获取 mockData ,但是没有必要,造成代码冗余);

执行顺序:

async beforeRouteEnter(to, from, next) {
   let res = await gameData()
   console.log('beforeRouteEnter start');
   next(vm => {
    console.log("vm start")
    vm.is_exchange = res.is_exchange
    vm.is_finish = res.is_finish
   })
 },
 beforeCreate() {
  console.log("beforeCreate start")
 },
 mounted(){
  console.log('mounted start');
  if(this.is_finish){
   this.modalMsg="活动已结束"
   return;
  }
  if(this.is_exchange){
   this.modalMsg="您已兑换奖品"
   return;
  }
 }

打印结果如下:

beforeRouteEnter start

beforeCreate start

mounted start

vm start

由打印结果,我们可以总结 beforeRouteEnter 钩子确实在 vue 实例创建前执行,但是其 next 函数中 vm 回调不是同步执行,而是等到 mounted 执行完之后,才执行 。

症结:因为我们要根据 mockData 中的 is_exchange 和 is_finish 参数来判断决定页面初始状态,此过程需要在 mounted 中执行;但是 mounted 执行时, vm 还未执行,即 mounted 拿不到

is_exchange 和 is_finish 这两个值,这样就造成了冲突;

解决:在 next 中 打印 vm ,发现 vm 就是当前 vue 实例对象,即可以使用 vm 调用所有当前实例的变量和方法;那依次,能否将判断逻辑写入 methods 中一个方法中,使用 vm 来调用呢?

async beforeRouteEnter(to, from, next) {
   let res = await gameData()
   console.log('beforeRouteEnter start');
   next(vm => {
    console.log("vm start")
    vm.is_exchange = res.is_exchange
    vm.is_finish = res.is_finish

    vm.judge();//赋值之后,此处调用判断方法
   })
 },
 beforeCreate() {
  console.log("beforeCreate start")
 },
 mounted(){
  console.log('mounted start');
 },
 methods:{
  judge(){// 将判断逻辑写入judge方法
  if(this.is_finish){
   this.modalMsg="活动已结束"
   return;
  }
  if(this.is_exchange){
   this.modalMsg="您已兑换奖品"
   return;
  }
  }
 }

至此,问题解决。有同学可能会问,在 vm 中调用 judge 方法时, mounted 已执行,此时页面已渲染,再去判断初始状态,会不会有闪烁问题?本人经过测试,发现不会,据此推断,在 mounted 执行结束之后,页面没有开始更新动作,而是在执行完 vm 回调之后,再去渲染。这样的话,逻辑上就行得通了,但是这个只是推断,还需要在源码层面找到依据才可以。

github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 对Vue beforeRouteEnter 的next执行时机详解

    背景 今天在用vue实现界面的时候,想在beforeRouteEnter钩子函数中去获取数据,然后通过next方法设置到跳转页面的实例中,结果发现数据一直没办法在界面渲染的时候赋值,苦思不得其解,遂google之,终寻原因,记录之. 注意 beforeRouteEnter (to, from, next) { console.log(this); //undefined,不能用this来获取vue实例 console.log('组件路由钩子:beforeRouteEnter'); next(vm

  • vue 中 beforeRouteEnter 死循环的问题

    如果在 vue 组件的 beforeRouteEnter 钩子函数中调用 API 请求,会出现循环执行的问题: beforeRouteEnter(to, from, next) { login().then(() => { next({ name: 'home' }); }).catch(() => { next(); }); }, 上面的代码会出现无限循环调用的问题,可能是API还没有请求完成,又一次进入 router,调用了 beforRouterEnter 的原因,解决办法加一个变量,在

  • 详解vue beforeRouteEnter 异步获取数据给实例问题

    场景: vue-router 路由钩子 beforeRouteEnter 可以用来在初始进入页面前,http 异步获取数据 mockData ,预先判断是进入 A 页.还是 B 页,还是留在本页:而如果留在本页的话,还需要在 mounted 根据 mockData 来判断显示哪种状态(可以在本页面实例创建后,重新发起 http 请求获取 mockData ,但是没有必要,造成代码冗余): 执行顺序: async beforeRouteEnter(to, from, next) { let res

  • 详解Vue的异步更新实现原理

    最近面试总是会被问到这么一个问题:在使用vue的时候,将for循环中声明的变量i从1增加到100,然后将i展示到页面上,页面上的i是从1跳到100,还是会怎样?答案当然是只会显示100,并不会有跳转的过程. 怎么可以让页面上有从1到100显示的过程呢,就是用setTimeout或者Promise.then等方法去模拟. 讲道理,如果不在vue里,单独运行这段程序的话,输出一定是从1到100,但是为什么在vue中就不一样了呢? for(let i=1; i<=100; i++){ console.

  • 详解Vue里循环form表单项实例

    有的时候我们可能会遇到这种需求,用户点击某个按钮就可以增加一个同样的表单出来,点击一次增加一次.然后要用到深拷贝,Vue.js+ElementUI等等.效果大概如下,就是一个表单有下拉框和两个输入框,现在点击"添加表单"按钮之后就会多一个表单出来,点击"提交表单"后就同时提交两个表单的value值. 代码如下: <template> <div> <div style="margin: 10px 0"> <

  • 详解Vue源码之数据的代理访问

    概念解析: 1) 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写) 2) vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作 3) 好处: 更方便的操作 data 中的数据 4) 基本实现流程 a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描述符 b. 所有添加的属性都包含 getter/setter c. getter/setter 内部去操作 data 中对应的

  • 详解Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组件的方法,不同的是vue采用的与html绑定事件. 给个例子 /*html*/ <input type="button" value="点击" v-on:click='handlClick' id="app"> /*js*/ var ap

  • 详解Vue.js自定义tipOnce指令用法实例

    vuejs自定义指令是用来操作DOM的.尽管Vue推崇数据驱动视图的理念,但并非所有情况都适合数据驱动.自定义指令就是一种有效的补充和扩展,不仅可用于定义任何的DOM操作,并且是可复用的. 最近碰到一种业务场景,业务场景如图: 有个操作提示点击可以显示,足够了吧?如图: 不够!好吧,产品说要求自动淡出提示! 后台操作复杂需要有个明显提示给业务人员更好地操作,而且这种提示,只需要一种提示就足够.于是我就想到了自己实现自定义指令. 整个vuejs场景是利用了构建模式开发,在我的main.js代码是这

  • 详解vue的数据binding绑定原理

    自从angular火了以后,各种mvc框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点-性能低下了.有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了.这样性能就很低了.于是人们开始钻研新的双向数据binding的方法.尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理. 数据binding,一般

  • 详解vue中v-model和v-bind绑定数据的异同

    vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data

  • 详解springboot使用异步注解@Async获取执行结果的坑

    目录 一.引言 二.获取异步执行结果 1.环境介绍 2.错误的方式 3.正确方式 三.异步执行@Async注解 四.总结 一.引言 在java后端开发中经常会碰到处理多个任务的情况,比如一个方法中要调用多个请求,然后把多个请求的结果合并后统一返回,一般情况下调用其他的请求一般都是同步的,也就是每个请求都是阻塞的,那么这个处理时间必定是很长的,有没有一种方法可以让多个请求异步处理那,答案是有的. springboot中提供了很便利的方式可以解决上面的问题,那就是异步注解@Async.正确的使用该注

  • 详解vue高级特性

    Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数 以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet

随机推荐