总结vue框架中的钩子函数

vue2.x生命周期钩子函数

组件的生命周期分为3个阶段:

  • 挂载阶段:beforeCreatecreatedbeforeMountmounted,
  • 更新阶段:beforeUpdateupdated,
  • 销毁阶段:beforeDestroydestroyed

beforeCreate


beforeCreate() {// 初始化数据,并通过Object.defineProperty()和给组件实例配置watcher观察者实例(发布-订阅者模式),实现数据监测// 该步骤可以用来检测vue是否开始实例化// data中的数据与el还未初始化,无法通过Vue实例来访问data中的数据、computed、watch、methods等中的方法。
}

created


created() {// 实例已完成以下配置:数据观测、属性和方法的运算,watch/event事件回调,完成了data 数据的初始化,可以访问data、computed、watch、methods上的方法和数据。但是,未挂载到DOM,不能访问到el属性,el属性,ref属性内容为空。
}

beforeMount


beforeMount() {//页面呈现的是未经Vue编译的DOM结构,所有对DOM的操作,最终都不奏效。
}

mounted


mounted() {//页面呈现的是经过vue编译的dom,对dom的操作均有效,至此,初始化阶段全部完成,一般在此执行:开启定时器,发送网络请求,订阅消息,绑定自定义事件等初始化操作。
}

beforeUpdate


beforeUpdate() {//当数据发生变化,执行beforeUpdate钩子函数,此时,内存中数据是新的,但是页面是旧的,也就是在这个钩子函数中,页面和数据不同步
}// beforeUpdate执行结束之后,重新生成一个新的虚拟dom(vnode),用它和原来的Vnode做比较(diff算法)patch指的就是这个比较的过程,更新render函数中的数据,之后之后将render函数渲染成真实dom,完成了 Model --> View 的更新

updated


updated() {// 页面和数据保持同步
}

beforeDestory


beforeDestroy() {// 在销毁前,在实例中所有的data,methods,computed,指令等,都处于可用状态;一般进行:关闭定时器,取消订阅消息解绑自定义事件等收尾工作。
}

destory


destoryed() {// 当前实例,视图层和逻辑层的关系解绑// 例如计时器,dom事件监听器或者与服务器的连接
}

父子组件钩子函数在三个阶段的代码执行顺序


挂载: 父亲created > 子created > 子mounted > 父亲mounted >
更新: 父亲beforeUpdate > 子beforeUpdated > 子updated > 父亲updated
销毁: 父亲beforeDestroy > 子beforeDestroy > 子destroyed > 父destroyed

========================================================

keep-alive组件的钩子函数

deactivated


deactivated() {// 非激活
}

activated


activated() {// 激活 
}
// 保活的页面希望页面显示时立刻刷新页面的数据  比如购物车
// 保持活动,不会销毁,而是激活与非激活,点回去就是激活,点走就是非激活

使用场景:

// 1. 用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态
// 2. keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单,它还可以避免组件反复创建和渲染,有效提升系统性能。总的来说,keep-alive用于保存组件的渲染状态
// 3. 使用keep-alive缓存组件本身是为了提高页面的性能,快速加载页面,但有时候在特定场景和条件中,比如在其他的组件对数据库中的数据发生更改,我们需要去更新当前组件的数据状态,而因为组件没有销毁,所以created和mounted钩子函数都不执行,deactivated和activated就是用来解决这个问题。

如何使用(触发)

当组件被keep - alive包裹时, 再次进入此组件, 此时组件是处于存活的情况下;
如果当前组件存在activated() 函数, 一进入组件activated() 立即触发;
这时我们就可以根据特定的条件去初始化组件数据。 当离开存在deactivated() 函数的组件时, 因为此时组件对象已经处于存活状态下, 所以一离开组件deactivated() 函数就触发(也可以根据特定的条件做一些事情)

========================================================

路由中的钩子函数(6个)

全局路由钩子函数:beforeEach afterEach

全局前置钩子beforeEach


// 在每一个路由改变的时候都要执行一遍 
router.beforeEach((to, from, next) => {// to 目标路由对象// from 当前导航正要离开的路由对象// next(Function函数),一定要调用该方法来resolve这个钩子。调用方法:next(参数或者空) ***必须调用// next(无参数的时候): 进行管道中的下一个钩子,如果走到最后一个钩子函数,那么 导航的状态就是 confirmed (确认的)
})
// 应用场景:
// 1. 进行一些页面跳转前的处理,例如跳转到的页面需要进行登录才可以访问时,就会做登录的跳转
// 2. 进入页面登录判断,管理员权限判断,浏览器判断

全局后置钩子afterEach


//  afterEach 被调用时,路由已经跳转完成,所以不需要 next 函数router.afterEach((to,from)=>{})

单个的路由钩子函数:beforeEnter


// 路由独享的守卫beforeEnter
// 可以直接在路由配置上直接定义beforeEnter,这些守卫与全局前置守卫的方法参数是一样的
beforeEnter((to, from, next) => {.....
})

组件内的路由钩子函数:beforeRouteEnter beforeRouteLeave beforeRouteUpdate

  • 使用场景:
    • 消除组件中的定时器
    • 当页面有未关闭的窗口,或未保存的内容时,阻止页面跳转
    • 保存相关内到Vuex和Session中

beforeRouteEnter


beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被confirm前调用// 不能获取组件实例 this// 因为当钩子执行时,组件实例还没有被创建
}

beforeRouteUpdate


beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候。// 由于会渲染同样的Foo组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 this}

beforeRouteLeave


beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 this
}

========================================================

组件自定义指令中的钩子函数direction(v2.x)

  • 对普通dom元素进行底层操作 Vue.directive('指令名称', {})

  • bind: 指令被绑到元素上的时候使用, 只会执行一次

    Vue.directive('color', {bind: function(el) { //el就是被绑定的元素el.style.color = "red"}})
  • inserted: 绑定指令的元素被添加到父元素上的时候使用, 只会执行一次

    Vue.directive('focus', {inserted: function(el) {el.focus()}})
  • update: 所在组建的VNode更新时调用, 但是可能发生在其子VNode更新之前, 也就是说元素更新, 但子元素尚未更新, 将调用此钩子(自定义指令所在组件更新时执行, 但是不保证更新完成)— > 和自定义所在组件有关

    Vue.directive('color', {update: function(el) {el.style.color = "blue"}})
  • componentUpdated: 组件和子级更新后执行(自定义指令所在组件更新完成, 且子组件也完成更新).

        Vue.directive('color', {componentUpdated: function(el) {el.style.color = "yellow"}})
    
  • unbind: 解绑(销毁) 自定义指令所在的dom销毁时执行, 只调用一次.

========================================================

组件自定义指令中的钩子函数direction(v3.x)

  • created - 自定义指令所在组件, 创建后
  • beforeMount - 就是Vue2.x中的 bind, 自定义指令绑定到 DOM 后调用.只调用一次, 注意: 只是加入进了DOM, 但是渲染没有完成
  • mounted - 就是Vue2.x中的 inserted, 自定义指令所在DOM, 插入到父 DOM 后调用, 渲染已完成(最最重要)
  • beforeUpdate - 自定义指令所在 DOM, 更新之前调用
  • updated - 就是Vue2.x中的 componentUpdated
  • beforeUnmount - 销毁前
  • unmounted - 销毁后

========================================================

vue3.x生命周期钩子函数 (函数式开发)


import {defineComponent,ref,toRefs,watch,computed,onUpdated....} from 'vue'
//setup函数替代了vuejs.2.x的beforeCreate和created钩子函数
1. onBeforeMount
onBeforeMount(()=>{// 在组件被挂载之前被调用,当这个钩子被调用时,组件已经完成其响应式状态的设置,但还没有创建DOM节点,即将首次执行DOM渲染过程。})  

onMounted


onMounted(()=>{// 在组件被挂载之前被调用,当这个钩子被调用时,组件已经完成其响应式状态的设置,但还没有创建DOM节点,即将首次执行DOM渲染过程。})

onBeforeUpdate


onBeforeUpdate(()=>{//在组件即将因为响应式状态变更而更新其DOM树之前调用,在beforeUpdate钩子函数执行时,组件的DOM还未更新,如果你想在组件更新前访问DOM,比如手动移除已添加的事件监听器,你可以注册这个钩子函数
})

onUpdated


onUpdated(()=>{//在组件因为响应式状态变更而更新其DOM树之后调用,父组件的更新钩子将在其子组件的更新钩子之后使用。 某些逻辑,最好不要使用updated钩子函数而用计算属性或watcher取而代之,因为任何数据的变化导致的组件更新都会执行updated钩子函数。注意:不要在updated钩子函数中更新数据,因为这样会再次触发组件更新,导致无限递归更新。父组件的更新不一定会导致子组件的更新,因为更新粒度是组件级别的。
})

onBeforeUnmount


onBeforeUnmount(()=>{// 在组件实例被卸载之前调用,当这个钩子被调用时,组件实列依然还保留全部的功能
})

onUnmount


onUnmounted(()=>{// 在组件实列被卸载之后调用,其所有子组件都已经被卸载。可以在这个钩子中手动清理一些副作用,例如计时器,dom事件监听器或者与服务器的连接
})

onErrorCapture


onErrorCaptured(()=>{// 注册一个钩子,在捕获了后代组件传递的错误时调用。
}) 

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

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

相关文章

基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码

基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于蛇优化算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于蛇优化优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神经网络…

大数据预处理技术

文章目录 前言 大数据技术成为前沿专业 也是现在甚至未来的朝阳产业,大数据有分别是 数据预处理 数据存储 大数据处理和分析 数据可视化 部分组成 ,大数据行业有数据则称王,大数据的核心是数据本身 怎么获取有价值的数据呢?本章讲…

android 9 adb安装过程学习(二)

一、PackageInstalllerService流程分析 下面来分析下 PackageInstallerService 中的逻辑,我们先来看看 PackageInstallerService 的创建,当然,这部分的逻辑是在开机的时候,这里我们再回顾下: 位置:./frame…

Cent OS 8.2 安装 自定义硬盘 固定IP VMware

时间:20231122 环境:win11 、VMware 16 pro、Cent OS 8.2 说明:自定义安装方法、自定义硬盘分区、固定IP且能联网 1、使用自定义的方式安装虚拟机 此处选择典型,则会自动安装系统,无法自定义硬件以及配置信息 选择…

CCF CSP认证 历年题目自练Day49

题目一 此题用暴力枚举做过(80分)现如今终于用二维前缀和做到满分。 试题编号: 202309-2 试题名称: 坐标变换(其二) 时间限制: 2.0s 内存限制: 512.0MB 问题描述: 问题…

【Axure视频教程】中继器首行函数

今天教大家在Axure里如何使用中继器首行函数,本视频教程会先从中继器首行函数的基础讲起,然后通过计算合计数、统计选中数、两个中继器选项联动这3个案例更加深入的讲解这这个函数的应用。注:该教程主要讲解中继器首行函数的用法,…

NFC:应用场景广泛的短距离通信技术

NFC:应用场景广泛的短距离通信技术 一、NFC 技术介绍1.1 NFC 技术应用场景1.2 NFC 技术优点1.3 NFC 工作原理 二、NFC 开发2.1 NFC 应用开发流程2.2 NFC 读取和写入2.3 NFC 读写功能示例 三、总结 一、NFC 技术介绍 NFC (Near-field communication&…

SM系列国密算法

一、概述 国产密码算法(国密算法)是指国家密码局认定的国产商用密码算法,国密算法是提升国家密码安全和数据安全的关键技术。 为了保障商用密码的安全性,国家密码局制定了一系列密码标准,包括:SM1、SM2、S…

分类预测 | Matlab实现基于PSO-PNN粒子群算法优化概率神经网络的数据分类预测

分类预测 | Matlab实现基于PSO-PNN粒子群算法优化概率神经网络的数据分类预测 目录 分类预测 | Matlab实现基于PSO-PNN粒子群算法优化概率神经网络的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现基于PSO-PNN粒子群算法优化概率神经网络的数据…

hadoop在本地创建文件,然后将文件拷贝/上传到HDFS

1.要$cd {对应目录}进入到对应目录,一般为 cd /usr/local/hadoop/ 2.创建文件,$sudo gedit {文件名},例 sudo gedit test.txt 然后在弹出的txt文件输入内容,点击右上角的保存之后,关闭即可。 3.拷贝本地文件到HDF…

RPG项目_UI登录

首先创建一个项目 将资源包导进Resources文件夹 创建一个Scripts脚本文件夹 然后再对Scripts脚本文件夹分门别类 导入UI资源包 创建一个Image 按住Alt 选择右下角 image就会覆盖整个面板 修改image名字为BG 将image图片放置背景栏 再创建一个image 改名为MainMenu 修改MainMenu…

屏幕坐标转换场景坐标并进行物体检测

在 OpenSceneGraph 中,要将屏幕坐标转换为当前场景坐标,并过滤出屏幕显示范围内的节点,可以通过以下步骤实现: 获取屏幕坐标: 当用户点击或交互时,获取鼠标点击的屏幕坐标。 转换屏幕坐标为世界坐标&#…

Linux上通过SSL/TLS和start tls连接到LDAP服务器

一,大致流程。 1.首先在Linux上搭建一个LDAP服务器 2.在LDAP服务器上安装CA证书,服务器证书,因为SSL/TLS,start tls都属于机密通信,需要客户端和服务器都存在一个相同的证书认证双方的身份。3.安装phpldapadmin工具&am…

一点DETR学习

DETR: 主要是为了学习query。 主要从两个方面:加偏好和缩短序列长度

〖大前端 - 基础入门三大核心之JS篇㊶〗- DOM事件传播和事件监听方法addEventListener()

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

ABAP调用Https接口 Ssl证书导入

ABAP调用Https接口 Ssl证书导入 一、证书导入 谷歌浏览器打开对方系统URL地址,下载SSL Server certificate,步骤如下: 浏览器打开要导出certificate(证书)的网站,点击这个小锁的图标: 点击连接是安全的后面小播放按钮 点击证…

Spark RDD、DataFrame和Dataset的区别和联系

一、三种数据介绍 是Spark中的三种不同的数据结构,它们都可以用于分布式数据处理,但是它们的实现方式和使用方法略有不同。 RDD(弹性分布式数据集) RDD是Spark最初的核心数据结构,它是一个分布式的、只读的、可容错的…

BIND DNS服务器的域名日志

BIND DNS服务器的域名日志 解析字段包括以下几个部分: 日期和时间:记录查询发生的日期和时间。客户端IP地址:发起查询的客户端IP地址。查询类型:查询的记录类型,如A、AAAA、MX、NS等。查询域名:被查询的域…

系列七、ThreadLocal为什么会导致内存泄漏

一、ThreadLocal为什么会导致内存泄露 1.1、ThreadLocalMap的基本结构 ThreadLocalMap是ThreadLocal的内部类,没有实现Map接口,用独立的方式实现了Map的功能,其内部的Entry也是独立实现的。源码如下: 1.2、ThreadLocal引用示意图…

educoder中Hive -- 索引和动态分区调整

第1关:Hive -- 索引 ---创建mydb数据库 create database if not exists mydb; ---使用mydb数据库 use mydb; ---------- Begin ---------- ---创建staff表 create table staff( id int, name string, sex string) row format delimited fields terminated by , stored…