vue的activated和deactivated生命周期

<keep-alive>包裹的动态组件会被缓存,它是一个抽象组件,它自身不会渲染一个dom元素,也不会出现在父组件链中。当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

如<keep-alive>包裹两个组件:组件A和组件B。当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行,这时通过点击事件改变组件A的文字的颜色,在切换到组件B,这时组件A的deactivated的生命周期函数会被触发;在切换回组件A,组件A的activated生命周期函数会被触发,但是它的created生命周期函数不会被触发了,而且A组件的文字颜色也是我们之前设置过的。

原文地址:https://www.cnblogs.com/hy96/p/12213144.html

时间: 2024-10-14 01:15:35

vue的activated和deactivated生命周期的相关文章

Vue 实例详解与生命周期

Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个 Vue 实例生成.编译.挂着.销毁等过程进行 js 控制. Vue 实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且 Vue 初始化的选项都已经用了data.methods.el.computedd等,估计您看到这里时,应该已经都明白了他们的作

vue学习(1)生命周期

生命周期的概念: 什么是生命周期: Vue实例有一个完整的生命周期,这个生命周期指的是Vue实例从开始创建,初始化数据,编译模板,挂载Dom,渲染-更新-渲染,卸载等一系列的过程,我们称这是vue的生命周期, 也就是说:vue实例的生命周期是从实力创建到销毁的过程,在生命周期中,提供了一系列的函数,这些函数应用到vue生命周期的不同阶段,我们称之为生命周期钩子,生命周期钩子用来在生命周期的不同阶段来调用不同的函数 生命周期图示:

Vue computed参数与各生命周期关系(主要是异步的时候)

前面聊了vue生命周期与路由的先后顺序,现在聊聊computed与各生命周期.先聊一下需求背景,我在做一个图表的时候遇到了,我将图表样式封装为一个组件,然后各个地方需要的时候将数据通过props传入到组件自动画图.因为我这个数据会变化,我的方法里面又有比较多的方法了,就像弄到计算属性里面去,这样在data里面也可以少定义一个属性,然后问题就来了.我在子组件里面读取的props竟然是未定义!!这个问题留到后面解释. 上次我们知道了父组件子组件生命周期的关系,同理我在computed当中定义了一个属

Vue入门系列(五)Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp

Vue与React的异同 -生命周期

vue的生命周期 创建前 beforeCreate 创建   create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 beforeDestroyed 销毁  destoryed methods --方法 -----------------------------------华丽的分割线------------------------- 一个React组件的生命周期分为三个部分:挂载期(Mounting).存在更新期(Up

Vue学习系列(四)——理解生命周期和钩子

前言 在上一篇中,我们对平时进行vue开发中遇到的常用指令进行归类说明讲解,大概已经学会了怎么去实现数据绑定,以及实现动态的实现数据展示功能,运用指令,可以更好更快的进行开发.而在这一篇中,我们将通过实例,探究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.js 1.x 和 2.x 实例的生命周期

在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x  实例的生命周期图示: Vue.js 1.x 的生命周期钩子 1. init  在实例开始初始化时同步调用.此时数据观测.事件和Watcher都尚未初始化. 2. created 在实例化创建之后同步调用.此时实例已经结束解析选项,已建立:数据绑定.计算属性.方法.Watcher/事件回调,但是还没有开始DOM编译,$el还不存在. 3.

vue 生命周期使用场景

vue的生命周期的几个状态不一一描述 下面是vue的几个常用生命周期适合的场景 beforecreate        这个阶段的时候data和method都是拿不到的(通常在实例以外调用)created              这个可以调用实例的数据和实例的方法(带异步数据请求的方法可以放在这里)mounted           用于初始数据的dom渲染(需要操作dom的方法放这里)updated            用于对数据更新做统一处理 (如果想分别区分不同的数据更新,同时进行do