vue 钩子函数

目录

钩子函数概念

生命周期钩子函数

keep-alive 钩子函数

自定义指令的钩子函数

路由导航 / 路由守卫  钩子函数

全局守卫

路由独享守卫

导航守卫


钩子函数概念

在 vue 中可以自动执行的函数叫做钩子函数

生命周期钩子函数

vue 从实例创建到销毁过程中被自动执行的函数。

  1. beforeCreate()       实例创建前触发
  2. created()                实例创建完成,
  3. beforeMount()        模板渲染前,可以访问数据,模板编译完成,虚拟DOM已经存在
  4. mounted()              模板渲染完成,可以拿到DOM节点和数据
  5. beforeUpdate()      更新前
  6. updated()               更新完成
  7. beforeDestroy()  销毁前
  8. destroyed()    销毁后

keep-alive 钩子函数

keep-alive 保存组件状态
在路由或者动态组件中,页面用户填写的数据可能会随着页面的切换而丢失,因为在每次切换的时候 vue 都会创建一个新的组件实例。
keep-alive 用来保存组件切换的时候页面状态内容,使用 keep-alive 包裹的组件不会随着页面的切换而丢失,因为被 keep-alive 包裹的组件在切换的时候会被缓存起来,因此在切换的时候可以降低性能上的损耗

  1. activated:在进入被 keep-alive 管理的组件时触发
  2. deactivated:在离开被 keep-alive 管理的组件时触发

自定义指令的钩子函数

  1. bind:指令绑定到元素之上的时候触发 只执行一次
  2. unbind:指令被移出的时候触发  只执行一次
  3. update:所有节点更新的时候执行
  4. componentUpdate:指令所在节点以及所有子节点都更新完成的时候执行
  5. inserted:绑定指令的元素在页面展示的时候执行

路由导航 / 路由守卫  钩子函数

全局守卫

在所有页面跳转的时候都会触发

  • 全局前置守卫 beforeEach:在所有路由页面跳转之前触发

  • 全局后置守卫 afterEach:在所有路由页面跳转之后触发

//写在路由配置的最下边
// to  去哪里   
// from 从哪个路由来的
// next 下一步(必须要写  不写的话  就会卡在这个钩子中不想下进行了)// 全局前置
router.beforeEach((to, from, next) => {if(to.path == "/phone" || to.path == "/shop"){next()}else{alert("您没有登录请您登录后再访问")next("/phone")}
})
// 全局后置
router.afterEach((to, from) => {console.log("全局后置守卫")
})
路由独享守卫

指定页面在跳转的时候触发

  • beforeEnter:只会对一个路由规则生效(写在那个规则之上  就对那个生效)
     {path: '/about',name: 'About',component: () => import('../views/About.vue'),// 路由独享守卫beforeEnter(to, from, next){console.log(to);console.log(from);next()}},
导航守卫

仅对某些组件在路由跳转的时候触发

  • beforeRouteEnter:进入组件的时候触发
  • beforeRouteLeave:离开组件的时候触发
// 进入组件beforeRouteEnter(to,from,next){console.log("我进来了")console.log(to)console.log(from)next()},beforeRouteLeave(to,from,next){console.log(to)console.log(from)if(confirm("您确定离开吗?")){next()}else{next(false)}},

广义上来说,watch、computed 这些也属于钩子函数

  • watch 是在监控的数据变化时就会自动执行对应的方法
  • computed是在数据变化时再次计算数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/216.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Logback:新版本报no applicable action for [Encoding]问题

logback.xml配置文件如下 <?xml version"1.0" encoding"UTF-8"?><configuration><include resource"org/springframework/boot/logging/logback/base.xml"/><!-- 日志输出的通道 --><appender name"STDOUT&qu…

mac tcp实现客户端与服务端进行图像传输及处理

客户端发送图像到服务端&#xff0c;服务端对图像进行处理&#xff0c;在将处理后的图像发送到客户端&#xff0c;并且服务端持续监听客户端。 客户端 #include <iostream> #include <fstream> #include <vector> #include <unistd.h> #include <…

【Shell语言】linux中awk命令

linux中awk命令 看这里放声嘶吼谁也不舍得沉默 宽阔也抓不住我下一秒钟的echo ——《暂时失控》苏打绿 awk命令简介 AWK 是一种处理文本文件的语言&#xff0c;是一个强大的文本分析工具。 之所以叫 AWK 是因为其取了三位创始人 Alfred Aho&#xff0c;Peter Weinberger, 和 B…

请陪伴Kimi和GPT成长

经验的闪光汤圆 但是我想要写实的 你有吗&#xff1f; 岁数大了&#xff0c;希望如何学习新知识呢&#xff1f;又觉得自己哪些能力亟需补强呢&#xff1f; 看论文自然得用Kimi&#xff0c;主要是肝不动了&#xff0c;眼睛也顶不住了。 正好昨天跟专业人士学会了用工作流的办法跟…

【Java】ArrayList removeIf() 方法

removeIf() 方法用于删除所有满足特定条件的数组元素。 removeIf()方法的语法为&#xff1a; arraylist.removeIf(Predicate<E> filter) 注&#xff1a;arraylist 是 ArrayList 类的一个对象。 参数说明&#xff1a;filter - 过滤器&#xff0c;判断元素是否要删除 返回…

Python中的Super方法实现问题及解决方案

1、问题背景 在Python中&#xff0c;super方法用于在子类中调用父类的方法。Guido van Rossum曾给出了一个纯Python实现的super方法&#xff0c;以便更好地理解其工作原理。然而&#xff0c;在这个实现中&#xff0c;存在一个问题&#xff1a;当传入的对象不是要调用的父类的实…

C++入门 (2)

文章目录 C入门C输入输出缺省参数全缺省半缺省函数声明与定义分离 函数重载C支持函数重载的原理--名字修饰 C入门 C输入输出 C输入输出包含在# include《iostream》中 cout 类似在控制台中输出&#xff0c;使用cout需要使用流插入符&#xff08;<<&#xff09; 这个符号…

代码随想录训练营-15day:二叉树4

一、平衡二叉树 平衡二叉树的定义&#xff1a;一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1。 使用递归方式&#xff1a;首先需要知道高度是什么意思&#xff0c;怎么获取高度。如果高度差大于1了&#xff0c;那么回复高度就没有意义了。 /*** Definition for…

Hotcoin4月16日上新热门资产:头部RWA技术提供方Centrifuge(CFG)

Hotcoin持续为全球600万用户发掘优质潜力资产&#xff0c;热门币种交易上热币。一文快速了解今日上新资产:Centrifuge(CFG) 推荐指数 8.2 交易对 CFG/USDT 交易时间 4月16日 19:00 资产赛道 RWA 项目简介 Centrifuge是一个去中心化资产融资协议&#xff0c;专注于释放现实世界资…

leetcode刷题(python)——(三)

01.02.02 练习题目&#xff08;第 03 天&#xff09; 1. 0066. 加一 1.1 题目大意 描述&#xff1a;给定一个非负整数数组&#xff0c;数组每一位对应整数的一位数字。 要求&#xff1a;计算整数加 1 1 1 后的结果。 说明&#xff1a; 1 ≤ d i g i t s . l e n g t h ≤…

网关模式和网桥模式的区别

网关&#xff0c;大家都知道&#xff0c;从一个房间走到另一个房间&#xff0c;必然要经过一扇门。同样&#xff0c;从一个网络向另一个网络发送信息&#xff0c;也必须经过一道“关口”&#xff0c;这道关口就是网关。顾名思义&#xff0c;网关(Gateway)就是一个网络连接到另一…

Object.hasOwn is not a function

背景 开发一个H5页面,使用Object.hasOwn来测试属性是否存在,在error监控中,发现某些用户访问会出现如下报错: 问题分析 因为不是所有的用户都报错,继而先去mdn上查看这个api的浏览器兼容性: Object.hasOwn() - JavaScript | MDN 从【Can I Use】上也查看了此web技术的…

STM32串口通信

一、串口发送 1.初始化引脚 void Serial_Init(uint32_t BaudRate) {RCC_APB2PeriphClockCmd (RCC_APB2Periph_GPIOA ,ENABLE );RCC_APB2PeriphClockCmd (RCC_APB2Periph_USART1 ,ENABLE );GPIO_InitTypeDef GPIO_InitStructure;GPIO_InitStructure.GPIO_Mode GPIO_Mode_AF_PP…

[疑难杂症2024-003]如何判断一张没有头信息的dcm图像,是否是压缩图像?

本文由Markdown语法编辑器编辑完成&#xff0e; 1. 前言: DCM格式&#xff0c;是医学图像领域里面的通用格式&#xff0e;DCM图像一般分为两大部分&#xff0c;一部分是TAG信息&#xff0c;一部分是像素. 而TAG信息&#xff0c;一般又会分为两部分&#xff0c;如下图所示, 是…

C++_智能指针

文章目录 前言一、智能指针原理二、库支持的智能指针类型1.std::auto_ptr2.std::unique_ptr3.std::shared_ptr4.std::weak_ptr 三、删除器总结 前言 智能指针是一种采用RAII思想来保护申请内存不被泄露的方式来管理我们申请的内存&#xff0c;对于RAII&#xff0c;我们之前也已…

LeetCode-热题100:102. 二叉树的层序遍历

题目描述 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a; root [3,9,20,null,null,15,7] 输出&#xff1a; [[3],[9,20],[15,7]] 示例 2&am…

【GEE实践应用】使用MODIS NDVI数据集绘制研究区域每日NDVI序列曲线

// 设置研究区域 var geometry table;// 选择MODIS NDVI 数据集 var modisNDVI ee.ImageCollection(MODIS/006/MOD13A2).filterBounds(geometry).filterDate(2000-01-01, 2023-12-31);// 计算每天的平均 NDVI var dailyMeanNDVI modisNDVI.map(function(image) {var date e…

AndroidStudio AGP 7+, 编译aar并输出到本地仓库

1 编写构建gradle脚本代码 1.1 配置publication和repository 在指定moudle目录下新建名为"maven-publish.gradle"文件&#xff0c;其声明的publication和repository如下所示&#xff1a; apply plugin: maven-publish// This creates a task called publishReleas…

# 从浅入深 学习 SpringCloud 微服务架构(二)模拟微服务环境

从浅入深 学习 SpringCloud 微服务架构&#xff08;二&#xff09;模拟微服务环境&#xff08;1&#xff09; 段子手168 1、打开 idea 创建父工程 创建 artifactId 名为 spring_cloud_demo 的 maven 工程。 --> idea --> File --> New --> Project --> Ma…

记录一个sentinel修改密码方法

docker run --name sentinel --restartalways -p 8858:8858 -d bladex/sentinel-dashboard 使用docker装了sentinel&#xff0c;公司不允许使用默认密码。 使用docker exec -it sentinel /bin/bash进入容器内 在app.jar所在目录下创建application.properties的配置文件 # I…