vue 关于生命周期

序言:

  1. vue 单组件的生命周期;

  2. vue 父子组件的生命周期;

  3. axios 异步请求 与 vue 的组件周期;

一、vue 每个组件的生命周期

  关于每个组件的生命周期,官方文档里也提供了,网上也能搜到各路大神们的相关文章,这里不赘述,贴一个网址以及简单总结。

  Vue的生命周期 - 转自浅白

  简单总结:

    1.beforeCreate 此时 $el、data 的值都为 undefined ;

    2.created 此时可以拿到 data 中的值,但是 this.$el 任然是 undefined ;

    3.beforeMounte 此时可以打印 this.$el, 但是当中的 {{ data }} 还没有被替换,this.$el 是虚拟节点;

    4.mounted data,$el 均可以被打印,{{ data }} 也已经被替换成正式的 Dom, vue实例被挂载在真实的 dom 树上;

    5.beforeUpdate/updated ;

    6.beforeDestroy/destroyed;

  一张简单示意图:

二、父子组件的生命周期

  在项目中,平时可能更多的是关心单个组件的生命周期。

  最近手头的一个项目有一个优化:入口是一个平台(父系统),在这个父系统中点击按钮进入子系统的相应模块,当然,窗口打开方式是 _blank,父子系统之间的通信流程是,vue路由导航守卫根据 cookie 中的 token 设置,cookie 中如过有 token ,正常跳转,没有 token ,通过 H5 postMessage() / window.addEventListener(‘message‘, function(event){}, false) 来向父系统获取 toke, 在回调函数 function(event){} 中,将获取的token 首先放入 cookie 中,这样,下次 axios 请求时可以从 cookie 中取值并设置请求头,其他用户信息等在依此根据 token 去获取并存入 localStorage 中。

  不过问题就出现在 _blank 上(这是技术选型的时候没有考虑的,vue 比较适合 spa 项目),如果我先以一个账号信息进入子系统的一个模块(打开了一个新标签页),然后不关闭这个页面回到父系统的窗口,切换账号登陆父系统,任然点击进入同一个子系统的模块,此时会发现,这次进入时拉取的数据是依据 localStorage 中存放的前一个 userId 拉取的,但是,F5 刷新一下就能拉取正确信息,这就不合理了。

  后来阅读源码,发现,子系统中最基础的子组件中某些关键信息都是从 localStorage 中获取,而每个模块中都有 postMessage 方法,只不过这个方法是在父组件的 mounted 阶段才调用,这就是导致了上面的换账号后进入模块,子组件根据 localStorage/cookie 中的前账号信息先去拉取数据,完成初始化,到所有子组件的初始化完成后父组件才执行 mounted 中 postMessage 方法,获取并在 cookie 中设置后账号的 token  ,然后 F5 刷新时,所用的请求头中是后账号的 token,才拉取到正确的数据。

  这里面的父子组件的生命周期是:

  1.加载渲染过程:

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

  2.子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

  3.父组件更新过程

父 beforeUpdate -> 父 updated

  4.销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

  明白了父子组件的渲染时间点,那在父组件 beforeCreate / created / beforeMount 时调用 postMessage 方法不就可以了吗?

  答案是不行。为什么?因为异步。我尝试了,在 父组件 的上面三个阶段内调用 postMessage 方法,其回调函数的执行一定会落后于子组件的渲染挂载,即 子组件凭借 cookie / loaclStorage 里面的前账号信息拉取数据 一定会在 后账号的 token 被存放到 cookie 中之前执行,这是其一;其二,因为 vue 推荐的是 axios 请求模块,这是一个异步请求模块,即使在父组件三个阶段内去更新用户信息,这一步依然会落后于子组件的渲染挂载。

  那么如何解决?

  我的解决办法:组件内路由钩子 beforeRouteEnter(to, from, next)

  在这个钩子中,调用 postMessage,获取 最新 token, 在其回调函数中,凭借新的 token, 使用 jquery(本来项目中有依赖)发送 一个拉取用户关键信息的 ajax 请求,这个请求设置成同步,获取到数据后,将相关信息更新到 cookie / localStorage 中,确保后续的请求都是依据最新的用户信息。在确保上面的操作全部完成之后,next() 到想要的路由上去。

  尾声:

  axios 中没有同步请求,$.ajax 也不推荐使用同步请求。需求如此,尚未找到更好的解决办法,vue 仍需探索。

原文地址:https://www.cnblogs.com/cc-freiheit/p/9876565.html

时间: 2024-11-07 13:52:51

vue 关于生命周期的相关文章

浅谈Vue的生命周期模型

Vue实例从创建到销毁的过程,就是生命周期.Vue的生命周期包括:开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 在Vue的整个生命周期中,提供了一系列的事件,可以注册JavaScript方法,达到控制整个过程的目的,在这些javascript方法中的this直接指向的是vue的实例. 在Vue的整个生命周期中,实例可以调用一些生命周期钩子,这提供了执行自定义逻辑的机会. Vue提供的生命周期钩子如下:① beforeCreate在实例初始化之后,数据观测(da

Vue实例生命周期

前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑.本文将详细介绍Vue实例的生命周期 图示 下图是Vue实例生命周期的图示 解释 接下来,根据提供的生命周期钩子,对Vue实例各个阶段的情况进行详细说明 [beforeCreate] 在实例开始初始化时同步调用.此时数据观测.事件等都尚未初始化 [created] 在实例创建之后调用.此时已完成数据观测.事件方法,但尚未开始DOM编译,即

8.vue的生命周期

Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期. 在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的是vue的实例. 再上图,对生命周期图的标注 特别值得注意的是created钩子函数和mounted钩子函数的区别 每个钩子函数

Vue实例生命周期+vueRoter

Vue实例生命周期 vue生命周期之beforeCreate 实例创建之前除标签外,所有的vue需要的数据,事件都不存在 vue生命周期之created 实例创建之后,data和事件已经被解析到,el还没有找到 vue生命周期之beforeMount 开始找标签,数据还没有被渲染,事件也没有被监听 vue生命周期之mounted 开始渲染数据,开始监听事件 vue生命周期之beforeUpdata 数据已经被修改在虚拟DOM,但没有被渲染到页面上 vue生命周期之updata 开始使用Diff算

VUE:生命周期

VUE:生命周期 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.vue对象的生命周期 1)初始化显示 * beforeCreate() * created() * beforeMount() * mounted() 2)更新状态:this.xxx=va

vue 的生命周期

vue的生命周期就是一个vue组件从出生到死亡的过程 *** 生命周期,你需要知道它是什么时候触发. beforeCreate 在组件初始化之前 在这个生命周期中组件的数据.方法.事件都还没有. 简单来说,new Vue之后,可以理解为第一句话就调用beforeCreate 可以在loading的时候用 function Fn(age){ beforeCreate(); this.age = age; } created 当数据.方法.事件初始化之后调用. 简单点来说,当数据有初始值之后调用.

vue的生命周期和钩子函数的理解

对于vue的生命周期,官方文档上并没有太多的文字性说明,把自己对生命周期和钩子函数的理解记录下来 官方文档 自己的理解 vue生命周期的概念:vue对象从被创建,到执行逻辑,最后到被销毁的过程. 具体流程: 1)vue实例的创建 2)初始化事件和生命周期 3)初始化data和methods 4)生成虚拟dom $el(将没有解析的指令的dom加载到内存中) 5)使用$el 来替代el,并且将$el中的指令进行解析 6)进行状态mounted的循环 判断data中的数据是否发生改变,如果改变,则跟

Vue 组件生命周期钩子

Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染完毕了.组件要被销毁了.组件销毁完毕了 等等时间节点, 每一个时间节点,vue都为其提供了一个回调函数(在该组件到达该时间节点时,就会触发对应的回调函数,在函数中就可以完成该节点需要完成的业务逻辑) # 3)生命周期钩子函数就是 vue实例的成员 beforeCreate 组件创建了,但数据和方法还

Vue.js 生命周期

生命周期示意图: beforeCreate  --> Function 在实例初始化之后,数据观测(data observer)和event/watcher 事件配置之前调用 created  --> Function 实例已经创建完成之后被调用,在这一步,实例已经完成以下的配置: > 数据观测(data observer) > 属性和方法运算 > watch/event 事件回调 beforeMount  --> Function 在挂载开始之前被调用,相关的 ren