vue 知识点———— 生命周期

1.什么是生命周期

Vue实例从创建到销毁的过程,叫生命周期。 从开始创建、初始化数据、编译模版、挂载Dom-渲染、更新-渲染、销毁等过程。

2.生命周期一共有几个阶段

创建前/后, 载入前/后,更新前/后,销毁前/销毁后

3.初始化相关属性

  1. beforeCreate(创建前):在数据观测和初始化事件还未开始。

在实例初始化之后,数据观测和事件配置之前被调用

  1. created(创建后):完成数据观察,属性和方法的运算,初始化事件,$el属性还没有显示出来。

在实例创建完成后被立即调用

  1. beforeMount(载入前):在挂载开始之前被调用,相关的render函数首次被调用。实例已完成编译模板,data里的数据和模板生成html。注意此时还没有挂载到页面上。

在挂载开始之前被调用

  1. mounted(载入后):在el被新创建的vm.$el 替换,并挂在到实例上之后调用。实例已完成:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到页面上。这个过程已和ajax交互。

el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子
DOM在该生命周期中渲染已完成

4.更新

  1. beforeUpdate(更新前):在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该生命周期中进一步更改状态,不会触发重新渲染过程。

数据更新时调用,发生在虚拟DOM打补丁之前

  1. updated(更新后):在数据更改导致的虚拟DOM重新渲染和打补丁之后调用。组件已更新,所以可以执行依赖于DOM的操作。避免在此期间更改状态,因为会导致更新无限循环,该钩子在服务器端渲染期间不被调用。

由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子

5.销毁

  1. beforeDestroy(销毁前):在实例销毁之前调用。

实例销毁之前调用

  1. destroyed(销毁后):在实例销毁之后调用。调用后所有的时间监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

实例销毁后调用

6.页面第一次加载会触发哪几个钩子

beforeCreate / created / beforeMount / mounted

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

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

相关文章

网络摄像头-流媒体服务器-视频流客户端

取电脑的视频流 当涉及交通事件检测算法和摄像头视频数据处理时,涉及的代码案例可能会非常复杂,因为这涉及到多个组件和技术。以下是一个简单的Python代码示例,演示如何使用OpenCV库捕获摄像头视频流并进行实时车辆检测,这是一个…

您的计算机已被[new_day@torguard.tg].faust 勒索病毒感染?恢复您的数据的方法在这里!

导言: 随着科技的迅速发展,网络空间也变得越来越危险,而勒索病毒则是网络威胁中的一个严重问题。 [ new_daytorguard.tg ].faust 勒索病毒是最新的威胁之一,采用高度复杂的加密技术,将受害者的数据文件锁定&#xff0c…

基于腾讯文档进行应届生个人求职记录

1. 新建一个腾讯文档 电脑登录QQ,点击“腾讯文档”功能键。 2. 可以选择下载客户端,也可以直接进入网页版。(本人使用网页版) 3. 点击新建,选择在线表格。 4. 编辑表名,表内容。 5. 设置文档权限&#xf…

性能测试工具LoadRunner —— 性能测试流程及结果分析

性能测试目的 1 什么是性能测试? 性能测试是通过性能的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。 负载测试和压力测试都属于性能测试,两者可以结合进行。通过负载测试,确定在各种工作负载下系统的性能&#xff0…

机器学习笔记之最优化理论与方法(七)无约束优化问题——常用求解方法(上)

机器学习笔记之最优化理论与方法——基于无约束优化问题的常用求解方法[上] 引言总体介绍回顾:线搜索下降算法收敛速度的衡量方式线性收敛范围高阶收敛范围 二次终止性朴素算法:坐标轴交替下降法最速下降法(梯度下降法)梯度下降法的特点 针对最速下降法缺…

不关闭Tamper Protection(篡改保护)下强制卸载Windows Defender和安全中心所有组件

个人博客: xzajyjs.cn 背景介绍 由于微软不再更新arm版本的win10系统,因此只能通过安装insider preview的镜像来使用。而能找到的win10 on arm最新版镜像在安装之后由于内核版本过期,无法打开Windows安全中心面板了,提示如下: 尝…

mysql技术文档--之与redo log(重做日志)庖丁解析-超级探索!!!

阿丹: 在刚开始写本文章的是还不太清楚要如何去细啃下这两个体系,在查阅资料的过程中。发现大厂阿里的庖丁解InnoDB系列,详细了的写了很多底层知识,于是基于这个这两个文章才有了阿丹的这篇文章。 整体认知: 在 MySQ…

分享一个python基于数据可视化的智慧社区服务平台源码

💕💕作者:计算机源码社 💕💕个人简介:本人七年开发经验,擅长Java、Python、PHP、.NET、Node.js、微信小程序、爬虫、大数据等,大家有这一块的问题可以一起交流! &#x1…

AI项目六:WEB端部署YOLOv5

若该文为原创文章,转载请注明原文出处。 一、介绍 最近接触网页大屏,所以就想把YOLOV5部署到WEB端,通过了解,知道了两个方法: 1、基于Flask部署YOLOv5目标检测模型。 2、基于Streamlit部署YOLOv5目标检测。 代码在…

mt7981支持leds驱动 - 修改5g led为普通led

一. 前言 由于工作中需要驱动mt7981的gpio,所以研究了下怎么使用mt7981的leds驱动子系统,记录如下文。 二. 将5g wifi灯复用为普通GPIO 1. 查看drivers/pinctrl/mediatek/pinctrl-mt7981.c static const struct group_desc mt7981_groups[] { ....../…

android 10 wifi操作

android 10及以上wifi发生了变化&#xff0c;android 10及以下代码需要适配。 android 10及以上&#xff1a; 1.权限&#xff1a; <uses-permission android:name"android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name"androi…

GPT 内部 — I : 了解文本生成

年轻的陀思妥耶夫斯基被介绍给生成AI&#xff0c;通过Midjourney创建 一、说明 我经常与不同领域的同事互动&#xff0c;我喜欢向几乎没有数据科学背景的人传达机器学习概念的挑战。在这里&#xff0c;我试图用简单的术语解释 GPT 是如何连接的&#xff0c;只是这次是书面形式。…

Windows安装Neo4j

图数据库概述 图数据库是基于图论实现的一种NoSQL数据库&#xff0c;其数据存储结构和数据查询方式都是以图论&#xff08;它以图为研究对象图论中的图是由若干给定的点及连接两点的线所构成的图形&#xff09;为基础的&#xff0c; 图数据库主要用于存储更多的连接数据。 Neo…

Java集合(Collection、Iterator、Map、Collections)概述——Java第十三讲

前言 本讲我们将继续来讲解Java的其他重要知识点——Java集合。Java集合框架是Java编程语言中一个重要的部分,它提供了一套预定义的类和接口,供程序员使用数据结构来存储和操作一组对象。Java集合框架主要包括两种类型:一种是集合(Collection),存储一个元素列表,…

C++【C++学习笔记_Wang】

时间进度C是什么&#xff1f;多态什么是多态&#xff1f;生活中的多态C中的多态 赋值兼容赋值兼容规则实现安全转换 时间进度 Day101 ok Day804 ok Day805 ok C是什么&#xff1f; C大部分包含C语言。 C完全兼容C语言。 C在C语言的基础上添加&#xff1a;封装、继承、多态…

Could not find artifact com.mysql:mysql-connector-j:pom:unknown

在 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope> </dependency> 添加版本号 这里用的是8.0.33版本&#xff0c;输入5.0的版本依然会报错 我自身用的是5.0…

kubernetes(K8S)笔记

文章目录 大佬博客简介K8SDocker VS DockerDockerK8S简介K8S配合docker相比较单纯使用docker 大佬博客 Kubernetes&#xff08;通常缩写为K8s&#xff09;是一个用于自动化容器化应用程序部署、管理和扩展的开源容器编排平台。它的构造非常复杂&#xff0c;由多个核心组件和附加…

领域驱动设计:事件风暴构建领域模型

文章目录 事件风暴需要准备些什么&#xff1f;如何用事件风暴构建领域模型&#xff1f; 事件风暴是一项团队活动&#xff0c;领域专家与项目团队通过头脑风暴的形式&#xff0c;罗列出领域中所有的领域事件&#xff0c;整合之后形成最终的领域事件集合&#xff0c;然后对每一个…

【PowerQuery】Excel 一分钟以内刷新PowerQuery数据

当需要进行刷新的周期如果小于一分钟,采用数据自动刷新就无法实现自动刷新的目标。那就没有办法了吗?当然不是,这里就是使用VBA来实现自动刷新。这里实现VBA刷新的第一步就是将当前的Excel 保存为带有宏的Excel 文件,如果不带宏则无法运行带有宏代码的Excel文件,保存过程如…

数据结构与算法(一)数组的相关概念和底层java实现

一、前言 从今天开始&#xff0c;笔者也开始从0学习数据结构和算法&#xff0c;但是因为这次学习比较捉急&#xff0c;所以记录的内容并不会过于详细&#xff0c;会从基础和底层代码实现以及力扣相关题目去写相关的文章&#xff0c;对于详细的概念并不会过多讲解 二、数组基础…