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

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

news 2026/2/7 17:19:28

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

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

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

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

一、HBuilder IDE的下载 HBuilder下载官网地址&#xff1a; 在地址栏中直接输入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的复杂度如下&#xff1a; std::vector&#xff1a; 时间复杂度为(1). std::deque&#xff1a; 时间复杂度为 O(1). 双端队列 std::list&#xff1a; 时间复杂度为 O(1)&#xff08;C11 及以后的版本&#xff09;。 std::forward_list&#xff1a; 时间复…...

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

android https 证书过期

有的时候 我们android https 证书过期 &#xff0c;或者使用明文等方式去访问服务器 可能会碰到类似的 问题 &#xff1a; 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&#xff08;Interrupt Controller Distributor Control Register&#xff09; 3.2 ICDISER…...

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

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

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

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

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

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

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

c# 判断是否连接公网

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

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

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

1、新建c#脚本如下 代码&#xff0c;在前方生成生成自身图片并3s后销毁自身&#xff0c;在碰撞物体后小鸟死亡后不删除自身 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异步网络框架&#xff0c;可以加快我们的下载速度。 Scrapy文档地址&#xff1a;http://scrapy-chs.readthedocs.io/z…...

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

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

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

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

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

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

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

harmony开发之Text组件的使用

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

编程日记 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

朴素贝叶斯 贝叶斯方法

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

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

探索鸿蒙 TextInput组件

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

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

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

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

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

C# 语法笔记

1.ref、out&#xff1a;参数传递的两种方式 ref&#xff1a;引用传递 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 表格多选(后端接口搜索分页)实现已选中的记忆功能。实现表格数据和已选数据（前端分页）动态同步更新。

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

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

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/7 7:53:36

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2026/2/5 19:49:27

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/2/6 22:55:12

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17