vue钩子函数的妙用之“created()和activated()”
一、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()”的更多相关文章
- vue 钩子函数 使用async await
示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- Vue钩子函数生命周期实例详解
vue生命周期简介 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁 ...
- Vue钩子函数
Vue的生命周期函数 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ cons ...
- vue 钩子函数的使用
1.什么是自定义指令,有哪些钩子函数及自定义指令的使用场景 ①自定义指令是什么?以及自定义指令的使用场景 在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须 ...
- vue 钩子函数的初接触
vue-router的路由钩子函数: 第一种:全局钩子函数. router.beforeEach((to, from, next) => { console.log('beforeEach') ...
- VUE钩子函数created与mounted区别
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图. mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作.
- vue 钩子函数
beforeRouteEnter 方法名称: beforeRouteEnter 调用时机: 切换路由之前,调用该方法时,页面还没有切换 next调用时机: activated 之后 注意事项: thi ...
- vue 钩子函数中获取不到DOM节点
原文链接:https://jingyan.baidu.com/article/f96699bbfe9c9d894f3c1b4b.html 两种解决方案: 1:官方解决方案: 受到 HTML 本身的一些 ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
随机推荐
- 【C# 线程】Thread类 以及使用案例
System.Threading.Thread类 涉及到的类和枚举 Volatile 类Interlocked 类SpinLock 类SpinWait类Barrier 类ThreadLocal< ...
- 小白都能看懂的tcp三次握手
众所周知,TCP在建立连接时需要经过三次握手.许多初学者经常对这个过程感到混乱:SYN是干什么的,怎么一会儿是1一会儿是0?怎么既有大写的ACK又有小写的ack?为什么ACK在第二次握手才开始出现?初 ...
- shell脚本练习案例
转至:https://www.cnblogs.com/tui463/archive/2004/01/13/12663024.html shell脚本练习案例 案例一:通过位置变量创建系统账户及密码 分 ...
- Java课程设计---WindowBuilder插件安装
1 .获取插件地址 WindowBuilder 地址http://www.eclipse.org/windowbuilder/download.php 打开网址后会看到如下 2.在线方式安装插件 根据 ...
- [炼丹术]基于SwinTransformer的目标检测训练模型学习总结
基于SwinTransformer的目标检测训练模型学习总结 一.简要介绍 Swin Transformer是2021年提出的,是一种基于Transformer的一种深度学习网络结构,在目标检测.实例 ...
- MM32F0020 UART1中断接收
目录: 1.MM32F0020简介 2.初始化MM32F0020 UART1和NVIC中断 3.编写MM32F0020 UART1中断接收函数 4.编写MM32F0020 UART1发送字节和ASCI ...
- 【python】kNN基础算法--推荐系统(辅助研究)
# -*- coding:utf-8 -*- # import numpy as np #import numpy 和from numpy import *是不一样的 # # # import num ...
- .NET6: 开发基于WPF的摩登三维工业软件 (8) - MVVM
基于WPF开发界面的一个很大优势是可以方便地基于MVVM设计模式开发应用.本文从应用的角度基于MVVM实现参数化管材的创建界面. 1 MVVM MVVM是Model-View-ViewModel的简写 ...
- Laravel常用工具类
工具类函数 Geom转成字符串 如果项目中有大量的计算经纬度需求,强烈建议使用PgSql的geometry类型 public static function formatGeomToStr($geom ...
- think php 验证码
1.下载 composer require topthink/think-captcha 1.* // composer 下载 //过程 D:\PHP\phpstudy_pro\WWW\1906A\p ...