当前位置： 首页 > news >正文

【生命周期】

news 文章来源：https://blog.csdn.net/weixin_64875217/article/details/133534604 2025/1/13 15:52:47

生命周期

  • 1 引出生命周期
  • 2 分析生命周期
  • 3 总结生命周期

1 引出生命周期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>引出生命周期</title><script src="../JS/vue.js"></script>
</head>
<body><!--总结生命周期：1.又名：生命周期回调函数、生命周期函数、生命周期钩子。2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm 或 组件实例对象。--><div id="root"><!-- <h2 :style="{opacity:opacity}">欢迎学习Vue</h2> opacity透明度,前一个是CSS属性,后一个是数据名 --><!-- 采用对象的简写形式，可简写为： --><h2 :style="{opacity}">欢迎学习Vue</h2></div>
</body>
<script>Vue.config.productionTip = false// const vm = new Vue({new Vue({el: '#root',data: {opacity:1},methods:{},// Vue完成模板的解析并把初始的真实的DOM元素挂载(放入)页面后调用mounted()函数mounted(){setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16);}})// 通过外部的循环定时器实现(不推荐)/* setInterval(() => {vm.opacity -= 0.01if(vm.opacity <= 0) vm.opacity = 1},16); */
</script>
</html>

在这里插入图片描述

2 分析生命周期

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>分析生命周期</title><script src="../JS/vue.js"></script>
</head>
<body><div id="root"><h2 v-text="n"></h2><h2>当前的n值是：{{n}}</h2><button @click="add">点我n+1</button><button @click="bye">点我销毁vm</button></div>
</body>
<script>Vue.config.productionTip = falsenew Vue({el: '#root',data: {n:1},methods:{add(){console.log('add');this.n++},bye(){console.log('bye');this.$destroy()}},watch:{n(){console.log('n变了');}},beforeCreate() {console.log('beforeCreate');// console.log(this); // 此时vm里没有_data、vm.n、vm.add()// debugger; // 卡一个顿点},created() {console.log('created');// console.log(this); // 此时vm里有了_data、vm.n、vm.add()、getter()、setter()// debugger;},beforeMount() {console.log('beforeMount');// console.log(this); // 此时页面呈现的是未经编译的DOM结构// debugger;},mounted() { // 重要的钩子console.log('mounted');// console.log(this); // 此时页面呈现的是经过编译的DOM结构// debugger;},beforeUpdate() {console.log('beforeUpdate');// console.log(this.n); // 数据是新的 但页面是旧的// debugger;},updated() {console.log('updated');//console.log(this.n); // 数据是新的 页面也是新的// debugger;},beforeDestroy(){ // 重要的钩子console.log('beforeDestroy');// console.log(this.n); // 此时能拿到数据// this.add() // 此时调用了add() 但页面没发生变化// debugger;},destroyed() {console.log('destroyed');// debugger;}})
</script>
</html>

在这里插入图片描述

3 总结生命周期

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>总结生命周期</title><script src="../JS/vue.js"></script>
</head>
<body><!--总结常用的生命周期钩子：1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。关于销毁Vue实例1.销毁后借助Vue开发者工具看不到任何信息。2.销毁后自定义事件会失效，但原生DOM事件依然有效。3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。--><div id="root"><h2 :style="{opacity}">欢迎学习Vue</h2><button @click="opacity = 1">透明度设置为1</button><button @click="stop">点我停止变换</button></div>
</body>
<script>Vue.config.productionTip = false// const vm = new Vue({new Vue({el: '#root',data: {opacity:1},methods:{stop() {// clearInterval(this.timer) // 清除定时器(温柔) 点击停止变换后再点透明度为1 透明度改变this.$destroy() // 暴力清除 点击停止变换后再点透明度为1不再发生变化 此时vm关了 但定时器没关}},// Vue完成模板的解析并把初始的真实的DOM元素挂载(放入)页面后调用mounted()函数mounted(){this.timer = setInterval(() => {this.opacity -= 0.01if(this.opacity <= 0) this.opacity = 1},16);},beforeDestroy() {clearInterval(this.timer) // 清除定时器}})
</script>
</html>

在这里插入图片描述

相关文章：

【生命周期】

生命周期 1 引出生命周期2 分析生命周期3 总结生命周期 1 引出生命周期 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta …...

编程日记 2023/10/4 6:30:32

【C语言 模拟实现memcpy函数、memcpy函数】

C语言程序设计笔记---027 C语言之模拟实现memcpy函数、memcpy函数1、介绍memcpy函数1.1、模拟实现memcpy函数 2、介绍memmove函数2.1、模拟实现memmove函数 3、结语 C语言之模拟实现memcpy函数、memcpy函数 前言&#xff1a; 通过C语言内存函数的知识&#xff0c;这篇将对memc…...

编程日记 2023/10/4 6:27:30

opencv视频文件的读取，处理与保存

文章目录 opencv视频文件的读取&#xff0c;处理与保存一、视频文件的读取&#xff1a;1、cv::VideoCapture是OpenCV库中用于处理视频输入的类&#xff0c;它提供了一种简单的方法来从摄像头&#xff0c;视频文件、或图像序列中读取帧&#xff1b;&#xff08;1&#xff09;打开…...

编程日记 2023/10/4 6:26:29

java - 七大比较排序 - 详解

前言 本篇介绍了七大比较排序&#xff0c;直接插入排序&#xff0c;希尔排序&#xff0c;冒泡排序&#xff0c;堆排序&#xff0c;选择排序&#xff0c;快速排序&#xff0c;归并排序&#xff0c;一些简单思想代码实现&#xff0c;如有错误&#xff0c;请在评论区指正&#xf…...

编程日记 2023/10/4 6:25:28

项目集成七牛云存储sdk

以PHP为例 第一步&#xff1a;下载sdk PHP SDK_SDK 下载_对象存储 - 七牛开发者中心 sdk下载成功之后&#xff0c;将sdk放入项目中&#xff0c;目录选择以自己项目实际情况而定。 注意&#xff1a;在examples目录中有各种上传文件的参考示例&#xff0c;这里我们主要参考的是…...

编程日记 2023/10/4 6:23:26

docker-compose一键启动neo4j

下载镜像 docker pull neo4j:3.5.22-community 编写配置文件 参考文档 编写docker-compose.yml文件 version: "3"services:neo4j:image: neo4j:3.5.22-communitycontainer_name: neo4j restart: alwaysports:- 7474:7474- 7687:7687environment:- NEO4J_AUTH:ne…...

编程日记 2023/10/4 6:22:25

深入剖析@ConfigurationProperties注解

当我们构建Spring Boot应用程序时&#xff0c;配置属性通常是不可或缺的一部分。Spring Boot提供了多种方式来管理这些属性&#xff0c;其中之一是使用ConfigurationProperties注解。这篇博客将详细解释ConfigurationProperties注解以及如何使用它来管理和映射配置属性。 什么…...

编程日记 2023/10/4 6:20:23

北京开发APP需要多少钱

北京开发一个移动应用&#xff08;APP&#xff09;的费用因多种因素而异&#xff0c;包括项目的规模、复杂性、所需功能、设计要求、技术选择、开发团队的经验和地理位置等。一般来说&#xff0c;北京的APP开发费用通常较高&#xff0c;因为这是中国的主要技术和创新中心之一&a…...

编程日记 2023/10/4 6:18:21

self-attention、transformer、bert理解

参考李宏毅老师的视频 https://www.bilibili.com/video/BV1LP411b7zS?p2&spm_id_frompageDriver&vd_sourcec67a2725ac3ca01c38eb3916d221e708 一个输入&#xff0c;一个输出&#xff0c;未考虑输入之间的关系&#xff01;&#xff01;&#xff01; self-attention…...

编程日记 2023/10/4 6:16:20

junit @ExcludePackages排除多个包

在JUnit中&#xff0c;可以使用ExcludePackages注解来排除多个包。该注解可以用在测试类或测试方法上。 如果要排除多个包&#xff0c;可以在ExcludePackages注解的value属性中使用数组来指定要排除的包名。例如&#xff0c;要排除包com.example.package1和com.example.packag…...

编程日记 2023/10/4 6:15:19

Explain执行计划字段解释说明---select_type、table、patitions字段说明

1、select_type的类型有哪些 2、select_type的查询类型说明 1、SIMPLE 简单的 select 查询,查询中不包含子查询或者UNION 2、PRIMARY 查询中若包含任何复杂的子部分&#xff0c;最外层查询则被标记为Primary 3、DERIVED 在FROM列表中包含的子查询被标记为DERIVED(衍生)&…...

编程日记 2023/10/4 6:14:18

云原生微服务 第六章 Spring Cloud Netflix Eureka集成远程调用、负载均衡组件OpenFeign

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 第六章 Spring Cloud 之 OpenFeign 文章目录 系列文章目录前言1、OpenFeign的实现…...

编程日记 2023/10/4 6:13:17

四、2023.9.30.C++面向对象end.4

文章目录 49、 简述一下什么是常函数&#xff0c;有什么作用&#xff1f;50、 说说什么是虚继承&#xff0c;解决什么问题&#xff0c;如何实现&#xff1f;51、简述一下虚函数和纯虚函数&#xff0c;以及实现原理&#xff1f;52、说说纯虚函数能实例化吗&#xff0c;为什么&am…...

编程日记 2023/10/4 6:12:16

【Java】包

package 包&#xff08;package&#xff09;:其实就是文件夹。 作用&#xff1a;对类进行分类管理。 包的定义格式 格式&#xff1a;package 包名&#xff08;多级包用 . 分开&#xff09; 范例&#xff1a;package com.mayikt.demo01 带包的Java类编译和执行 1. 手动建包 安装…...

编程日记 2023/10/4 6:11:15

Hive【Hive（二）DML】

启动 hive 命令行&#xff1a; hive DML 数据操作 1、数据导入 1.1、向表中装载数据&#xff08;load&#xff09; 语法&#xff1a; hive> load data [local] inpath 数据的path [overwrite] into table student [partition (partcol1val1,…)];&#xff08;1&#x…...

编程日记 2023/10/4 6:08:12

HTTP的请求方法，空行，body,介绍请求报头的内部以及粘包问题

目录 一、GET与POST简介 二、空行和body 三、初识请求报头以及粘包问题 四、认识请求报头剩余部分 一、GET与POST简介 GET https://www.sogou.com/HTTP/1.1 请求报文中的方法&#xff0c;是最常规的方法&#xff08;获取资源&#xff09; POST&#xff1a;传输实体主体的方法…...

编程日记 2023/10/4 6:05:08

win10 ip设置

百度安全验证...

编程日记 2023/10/4 6:03:07

alibaba dragonwell jdk

阿里巴巴Dragonwell8快速指南 dragonwell-project/dragonwell8 Wiki GitHub 阿里巴巴Dragonwell8用户指南 dragonwell-project/dragonwell8 Wiki GitHub 阿里巴巴Dragonwell8常见问题 dragonwell-project/dragonwell8 Wiki GitHub...

编程日记 2023/10/4 6:00:03

jvm内存分配与回收策略

自动内存管理 解决两个问题 自动给对象分配内存 对象一般堆上分配&#xff08;而实际上也有可能经过即时编译后被拆散为标量类型并间接地在栈上分配&#xff09; 新生对象通常会分配在新生代&#xff0c;少数情况下&#xff08;例如对象大小超过一定阈值&#xff09;也可能…...

编程日记 2023/10/4 5:59:02

【Vue2和Vue3的双向绑定区别】

Vue2和Vue3的双向绑定区别 vue2 双向绑定原理vue3 双向绑定原理Vue2和Vue3的双向绑定存在以下区别&#xff1a; vue2 双向绑定原理 Vue2 双向绑定的实现主要依赖于 Object.defineProperty() 方法和观察者模式&#xff0c;其中 Object.defineProperty() 方法用于定义属性的 get…...

编程日记 2023/10/4 5:58:02

【再识C进阶3(下)】详细地认识字符分类函数，字符转换函数和内存函数

前言 &#x1f493;作者简介&#xff1a; 加油&#xff0c;旭杏&#xff0c;目前大二&#xff0c;正在学习C&#xff0c;数据结构等&#x1f440; &#x1f493;作者主页&#xff1a;加油&#xff0c;旭杏的主页&#x1f440; ⏩本文收录在&#xff1a;再识C进阶的专栏&#x1…...

编程日记 2023/10/4 5:56:00

windows WSL配置cuda，pytorch和jupyter notebook

机器配置 GPU: NVIDIA Quadro K2000 与 NVIDIA 驱动程序捆绑的CUDA版本 但按照维基百科的描述&#xff0c;我的GPU对应的compute capability3.0&#xff0c;允许安装的CUDA最高只支持10.2&#xff0c;如下所示。 为什么本地会显示11.4呢&#xff1f;对此&#xff0c;GPT是这…...

编程日记 2023/10/4 5:53:58

回调地狱的产生=＞Promise链式调用解决

常见的异步任务包括网络请求、文件读写、定时器等。当多个异步任务之间存在依赖关系&#xff0c;需要按照一定的顺序执行时&#xff0c;就容易出现回调地狱的情况。例如&#xff0c;当一个网络请求的结果返回后&#xff0c;需要根据返回的数据进行下一步的操作&#xff0c;这时…...

编程日记 2023/10/4 5:51:56

【设计模式】六、建造者模式

文章目录 需求介绍角色应用实例建造者模式在 JDK 的应用和源码分析java.lang.StringBuilder 中的建造者模式 建造者模式的注意事项和细节 需求 需要建房子&#xff1a;这一过程为打桩、砌墙、封顶房子有各种各样的&#xff0c;比如普通房&#xff0c;高楼&#xff0c;别墅&…...

编程日记 2023/10/4 5:50:55

SpringBoot 可以同时处理多少请求

一、前言 首先&#xff0c;在Spring Boot应用中&#xff0c;我们可以使用 Tomcat、Jetty、Undertow 等嵌入式 Web 服务器作为应用程序的运行容器。这些服务器都支持并发请求处理的能力。另外&#xff0c;Spring Boot 还提供了一些配置参数&#xff0c;可以对 Web 服务器进行调…...

编程日记 2023/10/4 5:49:55

嵌入式Linux应用开发-驱动大全-第一章同步与互斥②

嵌入式Linux应用开发-驱动大全-第一章同步与互斥② 第一章 同步与互斥②1.3 原子操作的实现原理与使用1.3.1 原子变量的内核操作函数1.3.2 原子变量的内核实现1.3.2.1 ATOMIC_OP在 UP系统中的实现1.3.2.2 ATOMIC_OP在 SMP系统中的实现 1.3.3 原子变量使用案例1.3.4 原子位介绍1…...

编程日记 2023/10/4 5:48:54

EasyExcel的源码流程（导入Excel）

1. 入口 2. EasyExcel类继承了EasyExcelFactory类&#xff0c;EasyExcel自动拥有EasyExcelFactory父类的所有方法&#xff0c;如read()&#xff0c;readSheet()&#xff0c;write()&#xff0c;writerSheet()等等。 3. 进入.read()方法&#xff0c;需要传入三个参数(文件路径…...

编程日记 2023/10/4 5:47:52

基于 jasypt 实现spring boot 配置文件脱敏

前言 在项目构建过程中&#xff0c;保护敏感信息的安全性至关重要&#xff0c;为了提高系统的安全性能&#xff0c;我们采用了Jasypt来对配置文件中的敏感信息进行加密处理&#xff0c;以确保系统的机密信息不被轻易泄露。 步骤 添加Maven依赖 首先&#xff0c;我们需要添加…...

编程日记 2023/10/4 5:44:49

Python——ASCII编码与Unicode（UTF-8，UTF-16 和 UTF-32）编码

Python3 Python——ASCII编码与Unicode&#xff08;UTF-8&#xff0c;UTF-16 和 UTF-32&#xff09;编码 文章目录 Python3一、编码与编码格式二、ASCII编码与UTF-8编码&#xff08;UTF-16 和 UTF-32编码&#xff09;三、ASCII 字符串和 Unicode 字符串 最近看Python程序的文件…...

编程日记 2023/10/4 5:43:48

【多媒体技术与实践】音频信息获取和处理——编程题汇总

1&#xff1a;音频信息数据量计算 已知采样频率&#xff08;单位KHz&#xff09;、量化位数、声道数及持续时间&#xff08;单位分钟&#xff09;&#xff0c;求未压缩时的数据量&#xff08;单位MB&#xff09;. 例如&#xff1a; 输入&#xff1a; 22.05 16 2 3 &#xff…...

编程日记 2023/10/4 5:41:47

网站建设专题页/b2b采购平台

问题&#xff1a; swiper数量达到大约400时候会出现明显滑动卡顿&#xff0c;渲染慢的问题&#xff0c;达到1000时候需要几十秒时间&#xff0c;或者可能导致渲染失败。 解决方案&#xff1a; 配置circular"true"属性开启衔接滑动&#xff0c;即播放到末尾后重新回到…...

编程日记 2025/1/13 14:09:15

建德建设局网站/软文推广的好处

我们在进行程序的界面设计时&#xff0c;常常希望将位图的关键部分&#xff0c;也既是图像的前景显示在界面上&#xff0c;而将位图的背景隐藏起来&#xff0c;将位图与界面很自然的融合在一起&#xff0c;本实例介绍了透明位图的制作知识&#xff0c;并将透明位图在一个对话框…...

编程日记 2025/1/13 11:58:20

广汉做网站/北京seo关键词排名

最近&#xff0c;谷歌爸爸又收购了一家公司。长期以来&#xff0c;谷歌致力于推动围绕GoogleCloud的企业业务&#xff0c;但在这方面的表面一直被亚马逊和微软吊打&#xff0c;这次的收购正是为了弥补自身的短板。被收购的CaskData是一家专门提供基于Hadoop的大型数据分析服务解…...

编程日记 2025/1/13 10:49:23

做视频类型的网站/广州:推动优化防控措施落地

由于公司要做整套电子商务解决方案&#xff0c;考虑到平台的通用性&#xff08;其中b2b、b2c、o2o、小程序&#xff0c;都离不开基础平台&#xff09;&#xff0c;优先给公司规划&#xff1a; 平台管理端&#xff08;统一管理&#xff0c;包含自营店铺&#xff09;、商家管理端…...

编程日记 2025/1/13 10:01:29

web应用程序是什么意思/seo 优化是什么

本文实例讲述了php强制更新图片缓存的方法。分享给大家供大家参考。具体实现方法如下&#xff1a;/** 強制更新圖片緩存* param Array $files 要更新的圖片* param int $version 版本*/function force_reload_file($filesarray(), $version0){$html ;if(!isset($_COOKIE[force…...

编程日记 2025/1/13 9:57:05

wordpress get term/原创文章代写平台

(1)注册登录&#xff1a;注册普通账号登录&#xff1b;登录后可以修改用户的基本信息&#xff0c;也可以退出。 (2)浏览资讯&#xff1a;浏览网站管理发布的资讯&#xff0c;可以评论&#xff0c;评论后需要管理员审核和查看。也可以收藏资讯。 (3)关于我们&#xff1a;浏览网…...

编程日记 2025/1/13 6:52:07