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# 线程】IOCP IO完成端口-Windows系统下常见的7种I/O模型
一.IOCP(I/O Completion Ports)简介 要实现异步通信,必须要用到一个很风骚的I/O数据结构 ,叫重叠结构"Overlapped",Window ...
- VS编译时,出现无法将文件“obj\Debug\*.exe”复制到“bin\Debug\*.exe”。文件“bin\Debug\*.exe”正由另一进程使用,因此该进程无法访问此文件。
重命名将MyThread.exe 重命名 一下其他名字后就可以了.
- Python自动化 unittest生成测试报告(HTMLTestRunner)03
批量执行完用例后,生成的测试报告是文本形式的,不够直观,为了更好的展示测试报告,最好是生成HTML格式的. unittest里面是不能生成html格式报告的,需要导入一个第三方的模块:HTMLTest ...
- 组合拳 | 本地文件包含漏洞+TFTP=Getshell
文章声明 安全文章技术仅供参考,此文所提供的信息为漏洞靶场进行渗透,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作. 本文所提供的工具仅用于学习,禁止用于其他,未经授权,严禁转载,如需转 ...
- 【AI】AI学习方向
df
- Laravel 自定命令以及生成文件
以创建service层为例子 1.执行命令 php artisan make:command ServiceMakeCommand 2.在app\Console\Commands 下就会多出一个 Se ...
- vue-cli实现异步请求返回mock模拟数据
在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...
- jdk配置完成tomcat无法启动问题解决
今天在进行struts2练习之前,准备为电脑配置tomcat容器,发现jdk的java指令可以正确运行,而tomcat启动时控制台弹出后立即消失.查资料显示jdk为正确配置,但是自己的java指令都能 ...
- 记mysql5.7错误only_full_group_by
错误截图为上 mysql版本:5.7.35-0ubuntu0.18.04.1 "this is incompatible with sql_mode=only_full_group_by&q ...
- KVM 虚拟化基本知识,virtio工作原理
KVM虚拟化的基本知识,virtio的工作流程及原理,virtio-vhost, virtio-vhost-user pci 配置空间,是谁在kick 写pci配置空间的?又是通过什么机制通知给qem ...