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

Vue学习计划-Vue2--Vue核心（七）生命周期

news 文章来源：https://blog.csdn.net/qq_35940731/article/details/134799108 2024/9/21 4:32:10

抛出问题：一进入页面就开启一个定时器，每隔1秒count就加1，如何实现
示例：

<body>
<div id="app">{{ n }}<button @click="add">执行</button>
</div><script>let vm = new Vue({el: "#app",data:{n: 1},methods: {add(){// this.n ++setInterval(()=>{this.n ++},1000)}},// 特定时期调用特定函数（这就是 生命周期函数/钩子函数 ）// 表示页面渲染完成之后mounted(){setInterval(()=>{this.n ++},1000)   }})// 外部执行 不推荐，开启了定时器，最后要销毁的// setInterval(()=>{//     vm.n ++// },1000)
</script>
</body>

下面正式进入生命周期

1. 生命周期

常用的生命周期钩子：
1. mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例
1. 销毁后借助Vue开发者工具看不到任何消息
2. 销毁后自定义事件会失效
3. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会在触发更新流程了
4. vm.$destroy():完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
vm的生命周期
1. 将要创建 ==> 调用beforeCreate函数
2. 创建完毕 ==> 调用created函数
3. 将要挂载 ==> 调用beforeMount函数
4. （重要）挂载完毕 ==> 调用mounted函数 =====>【重要的钩子】
5. 将要更新 ==> 调用beforeUpdate函数
6. 更新完毕 ==> 调用updated函数
7. （重要）将要销毁 ==> 调用beforeDestroy函数 =====>【重要的钩子】
8. 销毁完毕 ==> 调用destroyed函数
注意：
$destory方法进入销毁生命周期，进入beforeDestroy后，销毁页面。vue-tools就不在监视,并且页面dom与Vue断了联系，点击页面事件已经无反应

在这里插入图片描述
示例：

	<!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>Document</title><script src="./vue.js"></script></head><body><div id="app" :x="n"><h2>当前的n值是：{{ n }}</h2><button @click="add">添加</button><button @click="bye">销毁</button></div><script>const vm = new Vue({el: "#app",// template:'<h2>当前的n值是：{{ n }}</h2><button @click="add">添加</button> <button @click="bye">销毁</button> ', // 模板不能空格// template:`// <div>// 		<template>//     		<h2>当前的n值是：{{ n }}</h2>//   		<button @click="add">添加</button> //     		<button @click="bye">销毁</button> // 		</template>// </div>// `,// template:`// <div>//     <h2>当前的n值是：{{ n }}</h2>//     <button @click="add">添加</button> //     <button @click="bye">销毁</button> // </div>// `,data: {n: 1},methods: {add(){console.log("add")this.n ++},bye(){this.$destroy()}},beforeCreate() {console.log('beforeCreate');// console.log(this)// debugger},created() {console.log('created');// console.log(this)// debugger},beforeMount() {console.log('beforeMount');console.log(this);// 最终都不奏效// document.querySelector("h2").innerText = "哈哈"// debugger},mounted() {console.log('mounted');console.log(this.$el)// 可以修改真实DOM，不推荐// document.querySelector("h2").innerText = "哈哈"// console.log(this)// debugger},beforeUpdate() {console.log('beforeUpdate');// console.log(this.n)// debugger},updated() {console.log('updated');// this.n = 99// console.log(this.n)// debugger},beforeDestroy() {console.log('beforeDestroy');console.log(this.n)this.n = 99// debugger},destroyed() {console.log('destroyed');// console.log(this)// debugger},})// vm.$mount("#app")</script></body></html>

回归问题：beforeDestroy生命周期内清除定时器

<body>
<div id="app"><p v-text="n"></p><h2>此时的n值是：{{ n }}</h2><button @click="n=99">n值设置为99</button><button @click="bye">停止</button>
</div><script>let vm = new Vue({el: "#app",data:{n: 1},methods: {bye(){// 手动清除定时器，DOM和Vue还有联系，所以点击n=99还能实现// clearInterval()// clearInterval(this.timer)// 手动调用$destory方法进入销毁生命周期，对比区别：进入beforeDestroy后，销毁页面。vue-tools就不在监视。并且页面dom与Vue断了联系，点击n=99,已经无反应this.$destroy()}},mounted(){console.log("mounted")this.timer = setInterval(()=>{console.log('setInterval')this.n ++},1000)   },beforeDestroy(){console.log(111);clearInterval(this.timer)}})
</script>

Vue学习计划-Vue2--Vue核心（七）生命周期

抛出问题：一进入页面就开启一个定时器，每隔1秒count就加1，如何实现示例： <body> <div id"app">{{ n }}<button click"add">执行</button> </div><script>let vm new …...

编程日记 2023/12/8 20:38:39

前端知识笔记（三十四）———HBuilder的下载与使用(详细步骤)

一、HBuilder IDE的下载 HBuilder下载官网地址： 在地址栏中直接输入https://www.dcloud.io 或者直接点击下面的链接 DCloud - HBuilder、HBuilderX、uni-app、uniapp、5、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架进入官网&#x…...

编程日记 2023/12/8 20:37:38

stl容器

大部分容器的size的复杂度如下： std::vector： 时间复杂度为(1). std::deque： 时间复杂度为 O(1). 双端队列 std::list： 时间复杂度为 O(1)（C11 及以后的版本）。 std::forward_list： 时间复…...

编程日记 2023/12/8 20:34:36

有的时候我们android https 证书过期 ，或者使用明文等方式去访问服务器可能会碰到类似的问题 ： javax.net.ssl.SSLHandshakeException: Chain validation failed java.security.cert.CertPathValidatorException: Response is unreliable: its validi…...

编程日记 2023/12/8 20:32:34

lv11 嵌入式开发中断控制器14

目录 1 中断控制器编辑 2 Exynos4412下的中断控制器 2.1 概述 2.2 特征编辑 2.3 中断状态 2.4 中断类型 2.5 中断控制器GIC中断表 3 中断控制器寄存器详解 3.1 ICDDCR（Interrupt Controller Distributor Control Register） 3.2 ICDISER…...

编程日记 2023/12/8 20:30:32

IDEA 出现问题：Idea-操作多次commit，如何合并为一个并push解决方案

❤️作者主页：小虚竹 ❤️作者简介：大家好,我是小虚竹。2022年度博客之星评选TOP 10🏆，Java领域优质创作者🏆，CSDN博客专家🏆，华为云享专家🏆，掘金年度人气作…...

编程日记 2023/12/8 20:29:31

贝蒂的捣蛋小游戏~（C语言）

引言： 前面贝蒂已经给大家介绍了选择，循环结构~，今天贝蒂就基于这两种结构，为大家讲解一种捣蛋小游戏的设计思路和方法哦。 1.游戏要求游戏要求： 1. 电脑⾃动⽣成1~100的随机数 2. 玩家猜数字，猜数字的过…...

编程日记 2023/12/8 20:27:29

c# 判断是否连接公网

有一个需求，软件需要在连接公网的状态下才能使用，否则弹出提示我们判断一下网络不通情况 1.系统未开启网络：例如关掉了WIFI，拔掉网线 2.网络已连接无internet：连接了路由器，但路由器未连接外网对于以上…...

编程日记 2023/12/8 20:26:28

unity 2d 入门飞翔小鸟场景延续（八)

1、新建c#脚本如下代码，在前方生成生成自身图片并3s后销毁自身，在碰撞物体后小鸟死亡后不删除自身 using System.Collections; using System.Collections.Generic; using UnityEngine;public class CopyScene : MonoBehaviour { //要复制的对象public…...

编程日记 2023/12/8 20:25:27

scrapy介绍，并创建第一个项目

一、scrapy简介 scrapy的概念 Scrapy是一个Python编写的开源网络爬虫框架。它是一个被设计用于爬取网络数据、提取结构性数据的框架。 Scrapy 使用了Twisted异步网络框架，可以加快我们的下载速度。 Scrapy文档地址：http://scrapy-chs.readthedocs.io/z…...

编程日记 2023/12/8 20:24:26

Rust语言项目实战(九 - 完结) - 胜利与失败

回顾在前面的章节中，我们已经实现了这个游戏中大部分的模块和功能，我们可以指挥我们的战机左右移动，并发射子弹；我们还创造了一堆的侵略者，从屏幕上方缓缓降落，试图到达屏幕的底部。本章中，我们将对游戏的输赢作出最后的裁决，到底是我们的保卫者英勇无敌，还是侵略…...

编程日记 2023/12/8 20:23:25

【Linux系统编程】项目自动化构建工具make/Makefile

介绍： make和Makefile是用于编译和构建C/C程序的工具和文件。Makefile是一个文本文件，其中包含了编译和构建程序所需的规则和指令。它告诉make工具如何根据源代码文件生成可执行文件，里面保存的是依赖关系和依赖方法。make是一个命令行工具&a…...

编程日记 2023/12/8 20:21:24

harmony开发之Text组件的使用

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。图片来源黑马程序员 Text组件的使用： 文本显示组…...

编程日记 2023/12/8 20:18:21

using meta-SQL 使用元SQL 六

%Table Syntax %Table(recname) Description Use the %Table construct to return the SQL table name for the record specified with recname. 使用%Table构造返回使用recname指定的记录的SQL表名。 This construct can be used to specify temporary tables for runn…...

编程日记 2023/12/8 20:15:18

如何将浮点数点左边的数每三位添加一个逗号，如 12000000.11 转化为『12,000,000.11』

// 方法二 function format1(number) {return Intl.NumberFormat().format(number); } // 方法三 function format2(number) {return number.toLocaleString("en"); }...

编程日记 2023/12/8 20:13:16

朴素贝叶斯贝叶斯方法

朴素贝叶斯贝叶斯方法背景知识贝叶斯分类：贝叶斯分类是一类分类算法的总称，这类算法均以贝叶斯定理为基础，故统称为贝叶斯分类。先验概率：根据以往经验和分析得到的概率。我们用 P ( Y ) P(Y) P(Y)来代表在没有训练数据前假设…...

编程日记 2023/12/8 20:12:15

探索鸿蒙 TextInput组件

TextInput 根据组件名字，可以得知他是一个文本输出框。声明代码👇 TextInput({placeholder?:ResourceStr,text?:ResourceStr}); placeholder: 就是提示文本，跟网页开发中的placeholder一样的 text：输入框当前的文本内容特殊属…...

编程日记 2023/12/8 20:11:14

CNN,DNN,RNN,GAN,RL+图像处理常规算法(未完待续)

好的，让我们先介绍一些常见的神经网络模型，然后再讨论图像处理的常规算法。神经网络模型： 1. CNN（卷积神经网络） 原理： CNN主要用于处理图像数据。它包含卷积层、池化层和全连接层。卷积层通过卷积操作…...

编程日记 2023/12/8 20:10:13

C# 语法笔记

1.ref、out：参数传递的两种方式 ref：引用传递 using System; namespace CalculatorApplication {class NumberManipulator{public void swap(ref int x, ref int y){int temp;temp x; /* 保存 x 的值 */x y; /* 把 y 赋值给 x */y temp; /* 把 t…...

编程日记 2023/12/8 20:06:10

el-table 表格多选(后端接口搜索分页)实现已选中的记忆功能。实现表格数据和已选数据（前端分页）动态同步更新。

实现效果：（可拉代码下来看：vue-demo: vueDemo） 左侧表格为点击查询调用接口查询出来的数据，右侧表格为左侧表格所有选择的数据，由前端实现分页。两个el-table勾选数据联动更新实现逻辑： el-…...

编程日记 2023/12/8 20:05:09

Vue3自定义Hooks定义

在Vue3中，自定义Hooks的定义是通过创建一个函数来共享逻辑或状态，以便在多个组件之间重复使用。Vue3中的自定义Hooks与React中的自定义Hooks非常相似，但有一些细微的差别。要定义一个自定义Hook，可以按照以下步骤进行操作&#x…...

编程日记 2023/12/8 20:04:08

为什么Java程序员需要掌握多线程？揭秘并发编程的奥秘

为什么Java程序员需要掌握多线程？揭秘并发编程的奥秘个人简介前言多线程对于Java的意义📌1.提高程序性能：📌2 提高用户体验：📌3支持并发处理：📌4 资源共享和同步：&#…...

编程日记 2023/12/8 20:02:06

数组实现循环队列（新增一个空间）

目录一、前言 1.如何实现循环？ 2.如何判断队列为空？ 3.如何判断队列为满？ 二、循环队列的结构定义三、循环队列的创建及其初始化四、入队五、出队六、取队头元素七、取队尾元素八、判空九、判满十、销毁队列一、前言 …...

编程日记 2023/12/8 20:01:05

Mysql 索引概念回顾

一、什么是索引在关系数据库中，索引是一种单独的、物理的对数据库表中一列或多列的值进行排序的一种存储结构，它是某个表中一列或若干列值的集合和相应的指向表中物理标识这些值的数据页的逻辑指针清单。索引的作用相当于图书的目录，可以根据…...

编程日记 2023/12/8 19:58:03

基于SpringBoot+Vue学生成绩管理系统前后端分离（源码+数据库）

一、项目简介本项目是一套基于SpringBootVue学生成绩管理系统，主要针对计算机相关专业的正在做bishe的学生和需要项目实战练习的Java学习者。包含：项目源码、数据库脚本等，该项目可以直接作为bishe使用。项目都经过严格调试，确…...

编程日记 2023/12/8 19:55:00

Hadoop集群破坏试验可靠性验证

集群环境说明： 准备5台服务器，hadoop1、hadoop2、hadoop3、hadoop4、hadoop5； 分别部署5个节点的zookeeper集群、hadoop集群、hbase集群本次对于Hadoop集群测试主要分为五个方面： 手动进行datanode节点删除：&#…...

编程日记 2023/12/8 19:53:59

Notepad++ 安装TextFx插件失败

据说TextFx插件是Notepad常用插件之一；有很多格式化代码的功能；下面安装一下； 插件管理里面看一下，没有这个TextFx； 根据资料，先安装NppExec； 然后下一个5.9老版本的Notepad，如下图…...

编程日记 2023/12/8 19:52:58

探究Logistic回归：用数学解释分类问题

文章目录前言回归和分类Logistic回归线性回归Sigmoid函数把回归变成分类Logistic回归算法的数学推导Sigmoid函数与其他激活函数的比较 Logistic回归实例1. 数据预处理2. 模型定义3. 训练模型4. 结果可视化结语前言当谈论当论及机器学习中的回归和分类问题时，很…...

编程日记 2023/12/8 19:51:57

杨辉三角

打印n行杨辉三角，n<10。输入格式: 直接输入一个小于10的正整数n。输出格式: 输出n行杨辉三角，每个数据输出占4列。输入样例: 5输出样例: 11 11 2 11 3 3 11 4 6 4 1代码长度限制 16 KB 时间限制 400 ms 内存限制 6…...

编程日记 2023/12/8 19:50:55

MS5228/5248/5268：2.7V 到 5.5V、 12/14/16Bit、内置基准、八通道数模转换器

MS5228/MS5248/MS5268 是一款 12/14/16bit 八通道输出的电压型 DAC ，内部集成上电复位电路、可选内部基准、接口采用四线串口模式， 最高工作频率可以到 40MHz ，可以兼容 SPI 、 QSPI 、 DSP 接口和 Microwire 串口。输出接到一个 …...

编程日记 2023/12/8 19:49:54

2024年江苏省职业院校技能大赛信息安全管理与评估第二阶段教师组 (样卷)

2024年江苏省职业院校技能大赛信息安全管理与评估第二阶段教师组 (样卷) 项目竞赛样题本文件为信息安全管理与评估项目竞赛-第二阶段样题，内容包括：网络安全事件响应、数字取证调查、应用程序安全。本次比赛时间为180分钟。介绍 GeekSec专注技能竞…...

编程日记 2023/12/8 19:48:54

zookeeper常用接口

ZookeeperTemplate 是 Spring Cloud Zookeeper 中的一个重要类，它提供了一组方便的方法来操作 Zookeeper，例如创建节点、获取节点数据、删除节点等。下面列举了 ZookeeperTemplate 的一些常用方法及其作用： createExclusive(String path)：创建独占节点。如果节点已经存在，…...

编程日记 2023/12/8 19:46:52

scipy笔记：scipy.interpolate.interp1d

1 主要使用方法 class scipy.interpolate.interp1d(x, y, kindlinear, axis-1, copyTrue, bounds_errorNone, fill_valuenan, assume_sortedFalse) 2 主要函数 x一维实数值数组，代表插值的自变量y N维实数值数组，其中沿着插值轴的 y 长度必须等于 x 的…...

编程日记 2023/12/8 19:45:51

外包干了一个月，技术明显进步。。。。。

先说一下自己的情况，本科生生，19年通过校招进入南京某软件公司，干了接近2年的功能测试，今年年初，感觉自己不能够在这样下去了，长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了2年的功能测试…...

编程日记 2023/12/8 19:44:50

docker安装node及使用

文章目录一、安装node二、创建node容器三、进入创建的容器如有启发，可点赞收藏哟~ 一、安装node 查看可用版本 docker search node安装最新版本 docker install node:latest二、创建node容器 docker run -itd --name node-test node–name node-test&#xff1…...

编程日记 2023/12/8 19:43:49

要求CHATGPT高质量回答的艺术：提示工程技术的完整指南—第 18 章：对抗性提示

要求CHATGPT高质量回答的艺术：提示工程技术的完整指南—第 18 章：对抗性提示对抗性提示是一种允许模型生成能够抵御某些类型的攻击或偏差的文本的技术。这种技术可用于训练更健壮、更能抵御某些类型的攻击或偏差的模型。要在 ChatGPT 中使用对抗性提…...

编程日记 2023/12/8 19:42:48

若依框架的搭建

若依框架若依框架的搭建（前后端分离版本）环境要求IDEA拉取Gitee源码Mysql 配置Redis 配置后端启动前端配置问题解决效果展示若依框架的搭建（前后端分离版本） 简介 RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基…...

编程日记 2023/12/8 19:41:46

SQL Server 数据库，多表查询

4.2使用T-SQL实现多表查询前面讲述过的所有查询都是基于单个数据库表的查询，如果一个查询需要对多个表进行操作， 就称为联接查询，联接查询的结果集或结果称为表之间的联接。联接查询实际上是通过各个表之间共同列的关联性来查询数据的&…...

编程日记 2023/12/8 19:40:44

程序解释与编译

▶1.程序的解释执行方式程序语言强写的计策机指令序列称为“源程序”,计算机并不能直接执行用高级语言编写的源程序，源程序必须通过“翻译程序”翻译成机器指令的形式，计算机才能项别和执行。源程序的翻译有两种方式：解释执行和编译执行。不…...

编程日记 2023/12/8 19:39:44

聊聊 Jetpack Compose 的 “状态订阅自动刷新” -- mutableStateListOf

Jekpack Compose “状态订阅&自动刷新” 系列： 【聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - MutableState/mutableStateOf 】【聊聊 Jetpack Compose 的 “状态订阅&自动刷新” - - remember 和重组作用域】【聊聊 Jetpack Compose 的 …...

编程日记 2023/12/8 19:38:43

Dockerfile详解#如何编写自己的Dockerfile

文章目录前言编写规则指令详解FROM：基础镜像LABEL：镜像描述信息MAINTAINER：添加作者信息COPY：从宿主机复制文件到镜像中ADD：从宿主机复制文件到镜像中WORKDIR：设置工作目录前言 Dockerfile是编写docker镜…...

编程日记 2023/12/8 19:36:41

Elasticsearch桶聚合和管道聚合

1. 根据名称统计数量 GET order/_search {"_source": false,"aggs": {"aggs_name": { // 自定义查询结果名称"terms": { // 使用的函数"field": "name.keyword"}}} }查询结果例子： "aggregat…...

编程日记 2023/12/8 19:34:40

联想范建平：联想混合AI架构具备两大明显优势

12月7日，首届AI PC创新论坛在北京联想集团总部举办。联想集团副总裁、联想研究院人工智能实验室负责人范建平表示，为提供真正可信、个性化的AI专属服务，联想提出了混合智能（Hybrid AI）概念，并已经显现出更强…...

编程日记 2023/12/8 19:31:37

探索Spring事件监听机制的奇妙世界

文章目录什么是Spring事件监听机制主要组件内置的事件监听类自定义事件监听类总结前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。什么是Spring事件监听机制 Spring事件监听机制是Spr…...

编程日记 2023/12/8 19:30:36

什么是散列函数

散列函数是一种公开的数学函数。散列函数运算的输入信息也可叫作报文。散列函数运算后所得到的结果叫作散列码或者叫作消息摘要。散列函数具有如下一些特点： （1）不同内容的报文具有不同的散列码，而一旦原始报文有任何改变&#xf…...

编程日记 2023/12/8 19:28:33

tomcat反序列化

漏洞介绍：漏洞名称： Apache Tomcat反序列化漏洞影响范围： Apache Tomcat服务器中使用了自带session同步功能的配置，且没有使用Encrypt Interceptor加密拦截器的情况下。漏洞描述： Apache Tomcat是一个基于Java的Web应用软件容器，用于运行servlet和JSP Web应用。当Tomc…...

编程日记 2023/12/8 19:27:32

flask 请求勾子实现 request_auth认证

from flask import g,request from comment.utils.tokens_pyjwt import verify_tokensdef jwt_request_auth():从请求(request)中获取token，并且验证token，验证成功之后把用户id保存到全局变量g中g.user_idNone #定义变量#前端代码是是把token携带请求头…...

编程日记 2023/12/8 19:24:29

【STM32入门】3.OLED屏幕

1.OLED引脚 OLED屏幕的接线按图所示，本例中用的是4管脚OLED屏幕 2.驱动程序配套的驱动程序是“OLED.c"，主要由以下函数构成：1、初始化；2、清屏；3、显示字符；4、显示字符串；5、显示数字…...

编程日记 2023/12/8 19:23:28

python圣诞树代码编程

以下是一个简单的Python圣诞树代码： def draw_tree(height): for i in range(height): print( * (height - i - 1) * * (2 * i 1)) print( * (height - 1) |)draw_tree(10) 这个函数会绘制一个等腰三角形，其中每一行的星号数量从1开…...

编程日记 2023/12/8 19:22:27

1. 生命周期

相关文章：