在使用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. RHEL6.3下挂载ISO并配置安装软件包(转)

    1.将RHEL6.3的ISO镜像上传至RHEL6.3服务器上 2.挂载ISO镜像 一般将镜像文件挂载到/mnt/XXX下,所以首先创建挂载文件夹: # mkdir /mnt/cdrom 挂载(我将上传 ...

  2. 844. Backspace String Compare

    class Solution { public: bool backspaceCompare(string S, string T) { int szs=S.size(); int szt=T.siz ...

  3. Remote Debugging (1)

    The client/server design of the Java debugger allows you to launch a Java program from computer on y ...

  4. C# String字符串

    C#(静态String类) C#中提供了比较全面的字符串处理方法,很多函数都进行了封装为我们的编程工作提供了很大的便利.System.String是最常用的字符串操作类,可以帮助开发者完成绝大部分的字 ...

  5. 20145232 韩文浩 《Java程序设计》第8周学习总结

    教材学习内容总结 14 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标记提供了clear(),rewind(),flip(),compact()等高级操作. 想要取得c ...

  6. Magic Powder - 2 (CF 670_D)

    http://codeforces.com/problemset/problem/670/D2 The term of this problem is the same as the previous ...

  7. Java中的final关键字--浅析

    final基本用法: 修饰类,类不能被继承 修饰方法,方法不能被重写 修饰变量,变量变常量,不可修该 对于一个final变量,如果是基本数据类型的变量,则其数值一旦在初始化之后便不能更改:如果是引用类 ...

  8. MapReduce编程之wordcount

    实践 MapReduce编程之wordcount import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.Fi ...

  9. ASP.NET Web API 框架研究 Self Host模式下的消息处理管道

    Self Host模式下的ASP.NET Web API与WCF非常相似,都可以寄宿在任意类型的托管应用程序中,宿主可以是Windows Form .WPF.控制台应用以及Windows Servic ...

  10. Git 安装 windows && linux

    一.安装: windows下安装Git: 1.下载Git:https://git-scm.com/download/win 2.安装Git:默认安装,一直回车 Linux下安装Git: yum安装: ...