精华内容
下载资源
问答
  • vue的activated生命周期

    千次阅读 2019-11-27 11:07:01
    包裹的动态组件会被缓存,它是一个抽象组件,它自身...当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行。在切换到组件B,这时组件A的deactivated的生命周期函数会被触发。在切换回组件A,...

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

    如keep-alive包裹两个组件:组件A和组件B。当第一次切换到组件A时,组件A的created和activated生命周期函数都会被执行。在切换到组件B,这时组件A的deactivated的生命周期函数会被触发。在切换回组件A,组件A的activated生命周期函数会被触发,但是它的created生命周期函数不会被触发了。

    展开全文
  • element-admin-vue使用f5刷新页面没有执行activated生命周期 最近使用这个框架时遇到一个小问题,就是使用缓存的组件强制刷新是不会执行activated生命周期。耐着性子去看了一下框架代码,发现是在layout文件夹下面的...

    element-admin-vue使用f5刷新页面没有执行activated生命周期

    最近使用这个框架时遇到一个小问题,就是使用缓存的组件强制刷新是不会执行activated生命周期。耐着性子去看了一下框架代码,发现是在layout文件夹下面的tagsView中监听路由的变化去保存需要缓存的组件,使用的是addTags()这个方法。

    方法体执行了什么就暂且不讨论了,需要注意的是这个方法是在tagsView组件的mounted生命周期中执行的。而我们所写的页面组件是处于跟tagsView同级的组件appMain组件的子组件,这里就涉及到父子组件的加载顺序了,父组件的mounted需要等到子组件mounted执行完成才会执行,子组件又取决于自身的复杂度。而appMain与tagsView是同级组件,他们之间没有逻辑交互,加载速度只有所处dom位置有关,所以这里appMain是先于tagsView完成加载,就导致了我们的组件强制刷新加载完成时还不是被缓存的组件,就不会执行activated生命周期。

    问题找到了,解决方法也很简单,直接将tagsView中mounted的方法放到created中执行就可以了,这样就不用等到tagsView组件挂载完成去缓存组件了

    //修改之前
    // mounted() {
    //  this.initTags()
    //  this.addTags()
    // },
      created() {
        this.initTags()
        this.addTags()
      },
    
    展开全文
  • vue-admin 是后台管理系统模板 页面缓存为何物? keep-alive在哪里? 在vue-admin文档结构中,src目录下的layout目录下,有个...从上面图片可知,通过keep-alive缓存的页面,可以通过activated生命周期函数进行页面

    vue-admin 是后台管理系统模板

    在这里插入图片描述

    页面缓存为何物?

    在这里插入图片描述
    在这里插入图片描述

    keep-alive在哪里?

    在这里插入图片描述
    在vue-admin文档结构中,src目录下的layout目录下,有个Index.vue文件,在此文件中,appMain是作为页面的主体部分展示的,打开对应的组件可以看到:

    在这里插入图片描述
    key(){return this.$route.path} 是将所有的路径都缓存了。

    缓存是我们想要的,但是页面还是要刷新。

    页面刷新

    在这里插入图片描述
    在这里插入图片描述
    从上面图片可知,通过keep-alive缓存的页面,可以通过activated生命周期函数进行页面的监听。也就是说,通过keep-alive缓存的页面,大部分的生命周期函数是不走的。比如:created,mounted等。唯一能够走的生命周期函数就是:activated与deactivated。

    所以可以将表单数据的加载函数放在activated生命周期函数中。

    问题解决。

    在这里插入图片描述

    展开全文
  • 关于activated生命周期函数 只有在keepalive的时候才会存在这个周期函数!!! 关于Promise.all函数 Promise.all([ new Promise(() => { reslove('res 1') }), new Promise(() => { reslove('res 2'...
    1. 关于activated生命周期函数

    只有在keepalive的时候才会存在这个周期函数!!!

    1. 关于Promise.all函数
    Promise.all([
    	new Promise(() => {
    		reslove('res   1')
    	}),
    	new Promise(() => {
    		reslove('res   2')
    	})
    ]).then (res => {//此时接收到的res是一个数组
    	clg(res[0])//res   1
    	clg(res[1])//res   2
    })
    
    1. let/const的暂时性死区,和var的区别

    暂时性死区:只要块级作用域内存在let/const命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”。

    不允许重复声明:let不允许在相同作用域内,重复声明同一个变量。

    ES6开始增加了块级作用域,所声明的变量,只在let/const命令所在的代码块内有效。

    {
      let a = 10;
      var b = 1;
    }
    
    a // ReferenceError: a is not defined.
    b // 1
    
    
    展开全文
  • vue 生命周期-activated

    千次阅读 2020-01-13 09:40:56
    页面出现的时候执行 activated生命周期函数,跟监听 watch 有类似的作用。 activated生命周期函数,是配合 keep-alive 进行使用或者路由跳转。进入页面时,mounted 与 activated 生命周期函数都会执行,当前 keep-...
  • Vue的生命周期钩子函数之activated

    万次阅读 2018-09-08 21:10:39
    Vue的生命周期钩子函数之activated activated 生命周期在keep-alive 组件激活时调用 服务器端渲染期间不调用该生命周期 通常和deactivated周期一起使用 以下例子演示随着屏幕的滚动切换顶部悬浮窗的显示与隐藏...
  • 如果从头到尾仔细阅读过我之前博客的朋友可能发现,我在讲vue生命周期的时候并没有详细的去讲activated以及deactivated这两个生命周期函数,在接下来的这篇博客中会为大家揭开它的神秘面试。 我会把列表页好详情页...
  • 主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1.当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 2.activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面...
  • <keep-alive>... 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 如<keep-alive>包裹两个组件:组件A和组件B。当第一次切换到组件A时,组件A的cr...
  • Vue之生命周期activated与created使用
  • Vue实例是一个完整的生命周期,即从开始创建,初始化数据,编译模板,挂载DOM,渲染更新,渲染卸载的过程,成为生命周期。 创建 beforeCreate created 添加 beforeMount mounted (在这里进行数据请求) 更新 ...
  • created created在刚进入页面的时候,会触发该函数的方法。只在页面刚开始加载时执行一次。 activated 一进入页面就触发;可用于初始化页面数据等
  • 除此之外,简单介绍一下在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:activated 与 deactivated。 文档:在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 树内的所有嵌套组件中触发。 ...
  • Vue的常见生命周期函数 ...activated,deactivated生命周期 vue.js 对这个两个钩子的描述 通常来说进入某一个动态组件,会首先创建vue组件实例,离开时则销毁此组件实例。 如果组件实例使用keep-alive包裹,离开组件时
  • activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等; deactivated():在vue对象存活的情况下,离开当前存在deactivated()函数的页面时,一离开...
  • keep-alive以及activated,deactivated生命周期的用法 这是在网上看到的一篇文章 vue官网的描述: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM ...
  • (你可以理解为生命周期钩子函数,用法也一样) mounted 指的是实例被挂载后调用,如果没有keep-alive每次切回来该组件都会触发一次,但是keep-alive会缓存不活动的组件实例,那么可以说他只会触发一次。所以往往...
  • 1:先看官方介绍 created 类型:Function ... 参考:生命周期图示 activated 类型:Function 详细: 被 keep-alive 缓存的组件激活时调用。 该钩子在服务器端渲染期间不被..
  • vue官网的描述: <keep-alive>... 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 通过描述我们知道,它会缓存不活动的组件,而不是销毁。这样组件之间..
  • 内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行。 也就是activated和deactivated必要和<keep-alive>配套使用才会生效。 而当组件使用keep-alive的时候created钩子函数只会被...
  • activated:{}----是vue的生命周期,指的是激活keep-alive缓存,优化性能,与之对应的生命周期是deactivted。 例如: //如果页面中有keep-alive缓存,这个函数会触发 activated(){} keep-alive(缓存) 使用场景:...
  • 随着对 vue 的不断了解,会越来越发现它生命周期的重要性,只有了解了它的生命周期,才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件,即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从...
  • 在Vue的生命周期函数中,这个好像用的不是特别多?(也许只是在我的工作中这个用的不多,或者说叫几乎不用这个) 一、需求 前不久在项目中有这样一个需求: 在订单页面的地址信息栏,默认通过接口填充了一个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,493
精华内容 2,597
关键字:

activated生命周期