在使用vue.js进行开发时,使用最多的就是created、mounted、activated。

  由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive。

  当引入keep-alive时,页面第一次进入,钩子的触发顺序是created-> mounted-> activated。当再次进入该页面时,只触发activated。

  因此,应该activated中留一份数据获取的代码,或者不要created部分,直接将created中的代码转移到activated中。

  created: 实例已经创建完成之后被调用,在刚进入页面的时候,会触发该函数的方法。只在页面刚开始加载时执行一次。

  mounted:页面加载完成后会执行该方法。

  activated:keep-alive组件激活时调用。也就是当页面存在缓存时调用。

vue.js生命周期钩子函数及缓存的更多相关文章

  1. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

  2. vue的生命周期钩子函数

    一.vue生命周期图示 二.钩子函数执行时间 beforeCreate      在创建实例之前,data只声明但没有赋值  在实例初始化之后,数据观测 (data observer) 和 event ...

  3. VUE的生命周期——钩子函数

  4. 关于 vue 生命周期 钩子函数 事件

    vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...

  5. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  6. vue生命周期图示中英文版Vue实例生命周期钩子

    vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...

  7. Vue 组件生命周期钩子

    Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...

  8. 对vue生命周期/钩子函数的理解

    对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到 ...

  9. VueRouter和Vue生命周期(钩子函数)

    一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router ...

随机推荐

  1. git .gitignore未生效

    添加进.gitignore的问题未生效. .gitignore只会忽略在.gitignore编写之后的未跟踪(untrack)文件,而在编写.gitignore之前已经add and commit的文 ...

  2. Bootstrap之Bootstrap组件

    一 文本居中 col-xx-offset-xx:水平居中 center-block:使用于不涉及float标签的水平居中,也不涉及列的居中,让哪里居中就写到哪里,本质是:margin:0 auto. ...

  3. myeclipse cannot connect to vm

    启动tomcat时,tomcat可以直接运行,而debug时弹出 解决方法:打开360安全卫士的功能大全找到修复网络(LSP)点击立即修复就可以使用debug

  4. c# 抽象类和抽象方法

    参考:http://www.runoob.com/csharp/csharp-polymorphism.html https://zhidao.baidu.com/question/587686949 ...

  5. SGU 271 Book Pile (双端队列)

    题意:n,m,k,表示有一个长度为 n 的序列,有 m 个操作,操作有 2 种,第一种是 ADD 在前面添加一个串,第二种是把前 k 个进行翻转,问你最后的序列是什么样的. 析:很明显,如果直接模拟, ...

  6. 移动端 - Android客户端性能测试常见指标

    rom版本的性能测试 一般关注功耗(不过 rom 版本的功耗测试跟应用的功耗测试会有所差异,当然只是用例设计方面的差异,工具仍然采用安捷伦电源仪进行) 应用的性能测试 包括很多测试项,如启动时间.内存 ...

  7. 【python-字典】判断python字典中key是否存在的

    一般有两种通用做法: 第一种方法:使用自带函数实现: 在python的字典的属性方法里面有一个has_key()方法: #生成一个字典 d = {'name':Tom, 'age':10, 'Tel' ...

  8. 【python3+request】python3+requests接口自动化测试框架实例详解教程

    转自:https://my.oschina.net/u/3041656/blog/820023 [python3+request]python3+requests接口自动化测试框架实例详解教程 前段时 ...

  9. Alpha冲刺 - (10/10)

    Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 本人负责的模块(共享编辑)的前端代码 ...

  10. [jquery]如何实现页面单块DIV区域滚动展示

    // 未实现功能的代码 1(自己写的代码) var _cur_top = $(window).scrollTop(); var num = $(".class_section"). ...