vue生命周期beforeDestroy和destroyed调用方式

目录
  • 生命周期beforeDestroy和destroyed调用
    • 情境一
    • 情景二
  • beforeDestroy和destroyed生命周期函数的特点

生命周期beforeDestroy和destroyed调用

情境一

离开当前路由，会直接调用；

当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁

情景二

离开当前路由，不会直接调用，需要程序控制调用；

当前路由使用 缓存，离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁，需要使用路由钩子函数主动的调用

beforeRouteLeave(to, from, next) {
  this.$destroy();
  next();
}

beforeDestroy和destroyed生命周期函数的特点

beforeDestroy生命周期函数表示即将销毁，此时仍然可以使用子组件的实例、methods、watch

到了destroyed生命周期函数，此时已经被销毁，无法再使用子组件的实例，methods、watch

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 聊聊vue生命周期钩子函数有哪些,分别什么时候触发

    聊聊vue生命周期钩子函数有哪些,分别什么时候触发

    目录 vue生命周期钩子函数 以下为详解版 生命周期mounted和activated使用.踩坑 activated mounted 踩坑 vue生命周期钩子函数 vue生命周期即为一个组件从出生到死亡的一个完整周期 主要包括以下4个阶段:创建,挂载,更新,销毁 创建前:beforeCreate, 创建后:created 挂载前:beforeMount, 挂载后:mounted 更新前:beforeUpdate, 更新后:updated 销毁前:beforeDestroy, 销毁后:destro

  • 深入理解Vue父子组件生命周期执行顺序及钩子函数

    先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 生命周期钩子 详细 beforeCreate 在实例

  • vue中destroyed方法的使用说明

    我们从destroyed的字面意思可知,中文意为是"销毁"的意思,当我们离开这个页面的时候,便会调用这个函数(具体可以看看vue的的生命周期),我们常用来销毁一些监听事件及定时函数,例如: // 销毁监听事件 destroyed() { window.removeEventListener('resize', this.resizeWin) } 从上函数可知,当用户离开页面的时候便会销毁监听事件. 补充知识:vue页面刷新时,执行了哪些生命周期--谨慎使用beforeDestroy和d

  • vue生命周期beforeDestroy和destroyed调用方式

    vue生命周期beforeDestroy和destroyed调用方式

    目录 生命周期beforeDestroy和destroyed调用 情境一 情景二 beforeDestroy和destroyed生命周期函数的特点 生命周期beforeDestroy和destroyed调用 情境一 离开当前路由,会直接调用: 当前路由不使用 缓存,离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁 情景二 离开当前路由,不会直接调用,需要程序控制调用: 当前路由使用 缓存,离开当前路由不会直接调用 beforeDestroy 和 befor

  • vue生命周期实例小结

    vue生命周期实例小结

    本文实例分析了vue生命周期.分享给大家供大家参考,具体如下: 每个Vue实例都存在完整的生命周期,经历从创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程.如下图所示 钩子函数 vue的完整生命周期可分为三个阶段:初始化阶段.运行阶段和销毁阶段.共存在很多钩子函数,他们在vue生命周期不同的阶段进行操作,列举如下: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy de

  • 一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

    目录 1.vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2.axios 2.0_axios基本使用 2.1_axios基本使用-获取数据 2.2_axios基本使用-传参 2.3_axios基本使用-发布书籍 2.4_axios基本使用-全局配置 3.nextTick和refs知识 3.0$refs-获取DOM 3.1$refs-获取组件对象 3.2$nextTick使用 3.3$nextTick使用场景 3.

  • Vue生命周期与后端交互实现流程详解

    目录 表单控制 购物车案例 v-model进阶(了解) vue生命周期 与后端交互 电影案例 表单控制 1.input:checkbox(单选,多选),radio(单选) 2.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="j

  • 详解Vue生命周期的示例

    详解Vue生命周期的示例

    一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue生命周期</title> <script src="../js/vue.js"></script> &

  • vue生命周期和react生命周期对比【推荐】

    个人认为,react和vue的业务逻辑是差不多,vue在react上封装了更简洁的方法,使用起来更加的便捷,如:提供了便捷的指令(v-for,v-if,v-model),还提供了更多的属性(computed,watch),我还是比较喜欢用react的,更接近js原生,更容易于理解它. 一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h

  • 对vue生命周期的深入理解

    对vue生命周期的深入理解

    一.Vue生命周期简介 官网:https://cn.vuejs.org/v2/api/#beforeCreate Vue实例从创建到销毁的过程,就是生命周期.详细来说也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程. 首先我们来看一下官网的生命周期图(我自己做了一点点注释): Vue提供给我们的钩子为上图的红色的文字 二.钩子详解 1.beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置

  • Vue生命周期区别详解

    Vue生命周期区别详解

    生命周期分类 vue每个组件都是独立的,每个组件都有一个属于它的生命周期, 从一个组件创建.数据初始化.挂载.更新.销毁,这就是一个组件所谓的生命周期. 在组件中具体的方法有: beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed beforeCreate( 创建前 ) 在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,el 和 data 并未初始化,因

  • Vue生命周期和钩子函数的详解与经典面试题

    Vue生命周期和钩子函数的详解与经典面试题

    目录 1. vue生命周期 2.钩子函数 2.1 分为4大阶段8个方法: 2.2 初始化阶段 2.3 挂载阶段 2.4 更新阶段 2.5 销毁阶段 面试题: 总结 1. vue生命周期 一组件从 创建 到 销毁 的整个过程就是生命周期 Vue 实例从创建到销毁的过程,就是生命周期.也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列过程,我们称这是 Vue 的生命周期. 2.钩子函数 Vue 框架内置函数,随着组件的生命周期阶段,自动执行,特定的时间点,执行特定的操

  • Vue生命周期介绍和钩子函数详解

    Vue生命周期介绍和钩子函数详解

    目录 Vue生命周期介绍和钩子函数 VUE生命周期钩子 Vue生命周期简介 create 和 mounted 相关 update 相关 destroy 相关 总结 Vue生命周期介绍和钩子函数 组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段.从Vue实例被创建开始到该实例最终被销毁的整个过程叫做VUE的生命周期,在这个生命周期内发生了下面的事情:从vue实例被创建开始,首先vue实例被创建,之后开始数据的初始化,编译模板,挂载do

随机推荐