vue的生命周期和路由守卫

组件相关钩子函数: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destoryed

还有两个特殊的(使用keep-alive):activated、deactivated(不详述)

v2.5.0+新增: errorCaptured (暂时还不知道咋用)

路由守卫:

全局&路由独享:beforeEach、beforeResolve(v2.5.0+新增)、afterEach ;beforeEnter(路由独享,类似beforeEach)

组件内:beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

组件生命周期钩子函数 

beforeCreate:

  实例初始化之后,this指向创建的实例,数据观测(data observer)和event/watcher配置尚未完成,不能访问到methods、data、computed、watch上的方法和数据

created

  实例创建完成,并已经完成以下配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调此时可以调用methods中定义的方法,修改data的数据,并且可触发响应式变化、computed值重新计算,watch到变更等

还未挂载到DOM,不能访问到$el属性,$ref属性内容为空数组

new Vue({
  data () {
    return {
      a : 1
    }
  } ,
  created (){
    console.log( this.a )  // 1
  }
})

这个生命周期阶段比较常用,比如ajax请求获取初始化数据对实例进行初始化预处理等操作;但要注意在结合vue-router使用时,进入created生命周期阶段后是无法对挂载实例进行拦截的,此时实例已经创建完成;故如果需要某些数据获取完成情况才允许进入页面的场景,建议在路由钩子beforeRouteEnter中实现。

 beforeMount:

在挂载开始之前被调用

注意:从vue生命周期图可以看出

当new Vue({...})的配置中没有el属性时,生命周期暂停,等待vm.$mount(el)调用时才继续

beforeMount之前,会找到对应的template,并编译成render函数
(这个步骤如果使用.vue文件和运行时版本将会在构建时提前完成)

template查找的优先级顺序:
template参数 > el 外部HTML
如果指定了render函数,则直接采用render函数,即忽略template参数和el外部HTML

写个栗子测试:

<div id="app">template outside</div>
...
import App from ‘./App.vue‘;  // App是任一Vue组件对象

new Vue({
  el: ‘#app‘,
  // template: ‘<p>template inside</p>‘,   // part inside
  // render: h => h(App)     //  part render
})

需要Vue完整版本支持,注释part inside和part render依次打开即可观察到三次不同的结果

Vue的编译过程暂略

mounted

el被新创建的$el替换 ---- 怎么理解?

这个可以理解为挂载前为实例寻找了一个暂时容身之处el,编译完成($el创建完成)后替换这个容身之处完成实例的挂载
如:之前那个栗子中,将part render打开后观察生成的DOM结构,<div id="app">template outside</div>这个节点即原el已经被替换掉

实例挂载到DOM上,此时可以通过DOM API获取到DOM节点,$ref属性可以访问

虽然经常观察到先进入子组件mounted,但根据Vue官方文档:

注意 `mounted` 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染
完毕,可以用 [vm.$nextTick](https://cn.vuejs.org/v2/api/#vm-nextTick) 

在这个阶段改变data上的值,相关的computed属性可以立刻更新;但需要进入到下一次DOM更新,才能看到DOM上数据更新

new Vue({
  el: ‘#app‘,
  template: ‘<p id="testa">{{a}}</p>‘,
  router,
  data ()
  {
    return {
      a : 0
    }
  },
  mounted() {
    this.a ++;
    console.log(this.b);   //  2
    console.log(document.getElementById(‘testa‘).innerHTML)  //  0
  },
  computed :{
    b (){
      return this.a+1;
    }
  }
})

beforeRouteEnter的next的勾子比mounted触发还要靠后 - 这个待会说到路由相关钩子时再展开

beforeUpdate

这里的更新对象是模板,即需要虚拟 DOM 重新渲染和打补丁,beforeUpdate发生在以上两个流程之前,此时新的虚拟DOM已经生成

如果发生变更的数据在模板中并没有使用(包括直接和间接,间接:比如某个依赖该数据的计算属性在模板中使用了),则不会触发更新流程!!!

如:

new Vue({
  el: ‘#app‘,
  template: ‘<p id="testa">{{a}}</p>‘,
  router,
  data ()
  {
    return {
      a : 0,
      b :  1
    }
  },
  mounted (){
    this.b ++;   //   b并没有在模板中使用
  },
  beforeUpdate (){
    debugger;  //  不会进入这个断点
  }
})

在一些参考文章中看到:
在这个钩子函数中,可以对状态进行进一步更改,不会再次触发重渲染流程 --- 这个说法有问题
如果对状态进行变更会导致重新进入beforeUpdate(这里变更的状态同样要在模板中使用,如果变更没有在模板中使用的data,才不会再次触发重渲染流程)
而且若变更操作不是基础类型的简单赋值,还会引起死循环(不断重新进入beforeUpdate)!

看看这个栗子,依次把注释打开测试

new Vue({
  el: ‘#app‘,
  template: ‘<p id="testa">{{a}}</p>‘,
  router,
  data ()
  {
    return {
      a : 0,
      c:  0
    }
  },
  beforeUpdate() {
    console.log(document.getElementById(‘testa‘).innerHTML)
    // this.c = 1;   //  this.c没有在模板中使用,变更不会引起重渲染流程
    // this.a = 3;  //  会再次进入一次重渲染流程,第二次进入时发现a仍是3,值没有变更,不会再次重渲染
    // this.a ++;   //  会引起死循环,每次进入重渲染流程时,a的值都会变更
  },
  updated() {
    console.log(document.getElementById(‘testa‘).innerHTML)
  }
})

应该避免在这个钩子函数中操作数据

beforeDestroy

实例销毁之前调用。在这一步,实例仍然完全可用,this仍能获取到实例

一般在这一步中进行:销毁定时器、解绑全局事件、销毁插件对象等操作

destroyed

Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

注意:vue2.0之后主动调用$destroy()不会移除dom节点,作者不推荐直接destroy这种做法,具体参考https://github.com/vuejs/vue/...,如果实在需要这样用可以在这个生命周期钩子中手动移除dom节点

总结

参考官方文档中的生命周期说明图

https://www.jianshu.com/p/7ff8f31afebe;

https://segmentfault.com/a/1190000013956945?utm_source=channel-newest;

原文地址:https://www.cnblogs.com/yunshangwuyou/p/9522739.html

时间: 2024-10-31 21:31:02

vue的生命周期和路由守卫的相关文章

Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参

目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 2. router-link标签 3.逻辑跳转 this.$router 控制路由跳转 this.$route 控制路由数据 Vue组件文件微微细剖 组件在view 文件中创建 如果需要用到其他小组件可以 在 component文件中创建并导入 view文件下: <template> <di

vue 关于生命周期

序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也提供了,网上也能搜到各路大神们的相关文章,这里不赘述,贴一个网址以及简单总结. Vue的生命周期 - 转自浅白 简单总结: 1.beforeCreate 此时 $el.data 的值都为 undefined : 2.created 此时可以拿到 data 中的值,但是 this.$el 任然是 un

Vue实例生命周期+vueRoter

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

vue 的生命周期

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

Vue 组件生命周期钩子

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

浅谈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钩子函数的区别 每个钩子函数