一、created()

在创建vue对象时,当html渲染之前就触发;

但是注意,全局vue.js不强制刷新或者重启时只创建一次,

也就是说,created()只会触发一次;

二、activated()

在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等

也就是说activated每次进页面都刷新,

所以一般查询列表、刷缓存的方法 要写在activated中,

就是为了数据刷新,不然编辑或其他操作后返回 数据不刷新

vue中keep-alive和activated需要相互搭配使用,keep-alive可能会封装,我们封装到component: RouteView  这个布局中,只有使用才会生效

具体测试可以参考:https://blog.csdn.net/qq_38861711/article/details/98185106

三、案例

没必要刷新的,就放上面created()

需要刷新的,就放到下面activated()

 

vue钩子函数的妙用之“created()和activated()”的更多相关文章

  1. vue 钩子函数 使用async await

    示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  2. Vue钩子函数生命周期实例详解

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

  3. Vue钩子函数

    Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...

  4. vue 钩子函数的使用

    1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...

  5. vue 钩子函数的初接触

    vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...

  6. VUE钩子函数created与mounted区别

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.

  7. vue 钩子函数

    beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...

  8. vue 钩子函数中获取不到DOM节点

    原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...

  9. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

随机推荐

  1. Python 中的闭包和自由变量

    1.定义 在函数内部再定义一个函数,并且这个函数用到了外部函数的变量(LEGB),最后返回新建函数的函数名索引,那么将这样的能够访问其定义时所在的作用域的函数以及用到的一些变量称之为闭包.被引用的非全 ...

  2. idea常用快捷键及配置

    目录 常用快捷键 常用配置 配置修改项 版本2019.1.3,配置.破解插件见网盘 2020.3.4 链接:https://pan.baidu.com/s/1WHsS8-yvHGf1iRopLbKIu ...

  3. C语言刷数组题记录

    讲解:https://mp.weixin.qq.com/s/weyitJcVHBgFtSc19cbPdw 二分法: 704. 二分查找 int search(int* nums, int numsSi ...

  4. (第二章第一部分)TensorFlow框架之文件读取流程

    本章概述:在第一章的系列文章中介绍了tf框架的基本用法,从本章开始,介绍与tf框架相关的数据读取和写入的方法,并会在最后,用基础的神经网络,实现经典的Mnist手写数字识别. 有四种获取数据到Tens ...

  5. Centos8 Yum 安装Nginx指定版本

    查看系统和EPEL的nginx版本   dnf info nginx 通过官方 yum 源安装nginx       vi /etc/yum.repos.d/nginx.repo 列出所有版本    ...

  6. map, reduce和filter(函数式编程)

    # map可以用于对可遍历结构的每个元素执行同样的操作,批量操作: map(lambda x: x**2, [1, 2, 3, 4]) # [1, 4, 9, 16] map(lambda x, y: ...

  7. jmeter关于入参转码encode问题

    我们的工作中,通过抓包经常会发现有很多入参都是被encode过一层,形成了如上图所示的样子: 这些参数我们是可以通过fiddler去转码的:但是如果我们要做jmeter的脚本,不可能每一次都手动去转码 ...

  8. SpringSecurity-5.11-课堂笔记-01

  9. Vtune工具简介

    VTune是 Intel 提供的一个强大的应用程序性能分析软件,VTune Amplifier XE 2011 集成了Intel VTune Performance Analyzer 和 Thread ...

  10. Map的野路子

    首先有一张user数据表,数据库名称为mybatis,数据如下: 我们使用以下两种方式实现数据更新的操作. 方式一 UserMapper.java如下: /** * @description: 更改用 ...