Vue2/Vue3 -------- 生命周期/钩子函数

(1)beforeCreate 钩子函数,在实例初始化之后,在数据监听和事件配置之前触发。因此在这个事件中我们是获取不到 data 数据的。

(2)created 钩子函数,在实例创建完成后触发,此时可以访问 data、methods 等属性。但这个时候组件还没有被挂载到页面中去,所以这个时候访问不到 $el 属性。一般我们可以在这个函数中进行一些页面初始化的工作,比如通过 ajax 请求数据来对页面进行初始化。

(3)beforeMount 钩子函数,在组件被挂载到页面之前触发。在 beforeMount 之前,会找到对应的 template,并编译成 render 函数。

(4)mounted 钩子函数,在组件挂载到页面之后触发。此时可以通过 DOM API 获取到页面中的 DOM 元素。

(5)beforeUpdate 钩子函数,在响应式数据更新时触发,发生在虚拟 DOM 重新渲染和打补丁之前,这个时候我们可以对可能会被移除的元素做一些操作,比如移除事件监听器。

(6)updated 钩子函数,虚拟 DOM 重新渲染和打补丁之后调用。

(7)beforeDestroy 钩子函数,在实例销毁之前调用。一般在这一步我们可以销毁定时器、解绑全局事件等。

(8)destroyed 钩子函数,在实例销毁之后调用,调用后,Vue 实例中的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

(9)beforeunmount 钩子函数,卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载

(10)unmounted 钩子函数,当卸载组件之前调用

当我们使用 keep-alive 的时候,还有两个钩子函数,分别是 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数。

ヾ( ̄▽ ̄)Bye~Bye~

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

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

相关文章

个人偏好测验,职业倾向分析和HR人才测评量表

个人偏好测验,以人的15种需求为理论基础,用来鉴别我们在这15个维度的倾向,从而为分析人格特征、职业倾向提供依据。15种需求理论最早由美国心理学家murray在1938年提出。 个人偏好测验,也叫个人爱好测试,人的需求因子…

网络体系结构概述

目录 1. OSI/RM参考模型1.1. 物理层1.2. 数据链路层1.3. 网络层1.4. 传输层1.5. 会话层1.6. 表示层1.7. 应用层 2. TCP/IP参考模型3. 理解OSI七层模型 网络体系结构是线代网络技术的整体蓝图。 1. OSI/RM参考模型 开放互联参考模型(Open System Interconnection/…

备考ICA----Istio实验12---配置双向TLS Istio Ingress Gateway实验

备考ICA----Istio实验12—配置双向TLS Istio Ingress Gateway实验 本实验部分配置延续上个Istio实验11 1. 重新配置secret 重新配置secret使其带有ca证书可以验证客户端证书是否合法 先删除原有secret,再配置新的secret # 删除原tls类型的secret kubectl -n istio-system d…

数据仓库——事实表

数据仓库基础笔记思维导图已经整理完毕,完整连接为: 数据仓库基础知识笔记思维导图 事实表 事务事实表 事务事实表用于跟踪事件,通过存储事实和与之关联的维度细节,允许单独或聚集地研究行为。粒度稀疏性包含可加事实 无事实的…

【Django开发】0到1美多商城项目md教程第4篇:图形验证码,1. 图形验证码接口设计【附代码文档】

美多商城完整教程(附代码资料)主要内容讲述:欢迎来到美多商城!,项目准备。展示用户注册页面,创建用户模块子应用。用户注册业务实现,用户注册前端逻辑。图形验证码,图形验证码接口设…

Java基础知识总结(32)

反射 类加载器 当JVM启动时,会形成由3个类加载器组成的初始类加载器层次结构。 Bootstrap ClassLoader:根类加载器。它负责加载Java的核心类。 Extension ClassLoader:扩展类加载器。它负责加载 JRE 的扩展目录(%JAVA_HOME%/jr…

网安基础2-Sniffer的使用与防范

1. 嗅探器sniffer的工作原理 能捕获经过该网络设备的报文,通过分析网络流量,找出关键信息,解决网络问题。 不同于键盘捕获程序,如keylogger利用中断或钩子技术,Sniffer将网络接口置成适当的模式,如杂收。…

【小黑送书—第十八期】>>让工作自动化起来!无所不能的Python(文末送书)

随着我国企业数字化和信息化的深入,企业对办公自动化的效率和灵活性要求越来越高。Python作为一种开源的软件应用开发方式,通过提供强大丰富的库文件包,极大地简化了应用开发过程,降低了技术门槛。Python开发有哪些优势、挑战以及…

搭建vite+vue3项目时遇到的问题

搭建项目(vitevue3) 第一步:先安装开发工具 下载node.js https://nodejs.cn/download/ node自带npm 可通过npm -v /node -v查看npm和node是否安装成功以及版本号 以及查看vue/cli是否安装 第二步:创建项目(使用vite) 下载vite: npm install -g create-vite 创建项目:create-v…

产品经理的进阶之路

点击下载《产品经理的进阶之路》 1. 前言 本文深入剖析了产品经理这一职业从产品专员起步,逐步晋升为产品经理、高级产品经理,直至产品总监的整个职业发展路径。在每个阶段,产品经理都需承担不同的工作职责,展现出独特的职业特点。 2. 产品专员 关键词【产品需求/原型/文…

栈和队列相关

栈的顺序存储结构 #define maxsize 50 typedef int ElemType; typedef struct {ElemType data[maxsize];int top; }SqStack; 顺序栈的基本算法 初始化栈 void InitStack(SqStack *s){s.top-1;return; } 判断栈空 bool IsEmptyStack(SqStack *s){if(s.top-1){return true;…

广度优先搜索(BFS)算法详解

文章目录 广度优先搜索(BFS)算法详解与C实现BFS的工作原理BFS的实现C中BFS的实现 BFS的应用场景注意事项 广度优先搜索(BFS)算法详解与C实现 广度优先搜索(Breadth-First Search,BFS)是一种遍历…

《QDebug 2024年3月》

一、Qt Widgets 问题交流 1. 二、Qt Quick 问题交流 1.Qt5 ApplicationWindow 不能使用父组件 Window 的 transientParent 属性 ApplicationWindow 使用 transientParent 报错: "ApplicationWindow.transientParent" is not available due to compone…

集合框架——Map

双列集合 特点: 双列集合一次需要存一对数据,分别为键和值键不能重复,值可以重复键和值是一一对应的,每个键只能找到自己对应的值键值这个整体 称为:键值对 键值对对象 Entry对象 Map集合的常用方法 public class …

ssm框架配置文件例子

emmm。。。。 就是说&#xff0c;正常ssm的配置文件长啥样&#xff1f; 就最基础的&#xff1f; 贴一下&#xff0c;备忘吧。 第一个&#xff1a;applicationContext.xml <beans xmlns"http://www.springframework.org/schema/beans"xmlns:context"http…

软考 - 系统架构设计师 - 敏捷开发方法

前言 敏捷开发方法是一种以人为核心、迭代、循序渐进的软件开发方法。它强调团队合作、客户需求和适应变化&#xff0c;旨在通过快速迭代和反馈来快速交付高质量的软件产品。 敏捷开发方法的优势在于能够快速响应变化、提高开发效率和质量、增强团队协作和沟通&#xff0c;并降…

Python程序设计 多重循环

教学案例六 多重循环 1.n之内的素数 输入n&#xff0c;显示n之内的所有素数 每行显示10个素数 例如&#xff0c;若输入500&#xff0c;结果如图所示 neval(input()) #代码开始 c 0for i in range(2, n1):for j in range(2, i):if i % j 0:breakelse:c 1print("{:5d}…

四年旅程,一路成长——小雨的创作纪念日

四年旅程&#xff0c;一路成长——小雨的创作纪念日 收到来信&#xff0c;回顾与再开始回首起点&#xff0c;初探技术世界持续前行&#xff0c;从坚持到自信今日之感&#xff0c;持续分享与感恩【3.19故事对话】我一定可以&#xff01;“新”认知状态变化感受复盘 朝着未来&…

Kubernetes(K8s)技术解析

1. K8s简介 Kubernetes&#xff08;简称K8s&#xff09;是一个开源的容器编排平台&#xff0c;旨在简化容器化应用程序的部署、扩展和管理。为开发者和运维人员提供了丰富的功能和灵活的解决方案&#xff0c;帮助他们更轻松地构建、部署和管理云原生应用程序。以下是关于Kubern…

C# OpenCvSharp-HoughCircles(霍夫圆检测) 简单计数

目录 效果 项目 代码 下载 效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using O…