Vue学习计划-Vue2--Vue核心(七)生命周期

抛出问题:一进入页面就开启一个定时器,每隔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>

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

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

相关文章

一文搞懂Git版本控制系统

1. Git简介 当涉及到软件开发或协作时&#xff0c;版本管理是一个不可或缺的概念。无论你是一个独立开发者还是一个团队成员&#xff0c;都会遇到需要跟踪和管理代码变更的情况。这时候&#xff0c;Git作为一个强大而流行的版本控制系统就发挥着重要的作用。 Git&#xff08;读…

玩转大数据9:机器学习在大数据分析中的应用

1. 引言 在大数据时代&#xff0c;机器学习在大数据分析中扮演着至关重要的角色。本文介绍机器学习在大数据分析中的重要性和应用场景&#xff0c;并探讨Java中可用的机器学习库和框架。 2. 机器学习的基本概念和算法 机器学习是当今人工智能领域的一个关键分支&#xff0c;…

区分物理端口与软件端口概念:以交换机端口和Linux系统中的端口为例

文章目录 交换机端口和Linux系统中的端口有什么区别&#xff1f;1. 交换机的端口2. Linux系统中的端口因此&#xff0c;尽管两者都被称为"端口"&#xff0c;但它们代表的含义和用途是完全不同的。 交换机端口和Linux系统中的端口有什么区别&#xff1f; 虽然都被称为…

智慧园区可视化综合管理平台建设方案,智能化、数字化才是关键

园区作为城市的基本单元&#xff0c;是经济发展的重要载体。随着我国经济的快速发展&#xff0c;各类工业园区、办公园区等园区的规划建设也越来越多。伴随着互联网新兴技术的发展和应用&#xff0c;智慧园区已成为当今城市规划和社会发展的关注焦点&#xff0c;今天我们来介绍…

实战oj题——设计循环队列

前言&#xff1a;今天我们来实现循环队列。 各个接口的实现 创建队列&#xff1a; typedef struct {int* a;int front;int back;int k;} MyCircularQueue;我们的队列是由数组储存的&#xff0c;所以我们队列中得定义一个数组&#xff0c;front代表我们的首元素&#xff0c;ba…

腾讯云轻量应用服务器怎么安装BT宝塔面板?

腾讯云轻量应用服务器宝塔面板怎么用&#xff1f;轻量应用服务器如何安装宝塔面板&#xff1f;在镜像中选择宝塔Linux面板腾讯云专享版&#xff0c;在轻量服务器防火墙中开启8888端口号&#xff0c;然后远程连接到轻量服务器执行宝塔面板账号密码查询命令&#xff0c;最后登录和…

Gti GUI添加标签

通过Git Gui打开项目&#xff0c;通过菜单打开分支历史&#xff0c;我这里是名为"develop"的分支 选中需要打标签的commit&#xff0c;右键-Create tag即可 但貌似无法删除标签&#xff0c;只能通过git bash

卡码网语言基础课 | 20. 排队取奶茶

目录 一、 队列的基本认识 二、 队列的操作 2.1 引入头文件 2.2 创建队列 2.3 队列的常见操作 三、 解题 通过本次练习&#xff0c;将会学习到以下C知识点&#xff1a; 队列的基本概念&#xff08;队头、队尾&#xff09;和特点&#xff08;先入先出&#xff09;入队、出队…

Android : Xui- RecyclerView+BannerLayout 轮播图简单应用

实例图&#xff1a; 1.引用XUI http://t.csdnimg.cn/Wb4KR 2.创建显示图片布局 banner_item.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"…

【CentOS8】使用 Tomcat 部署 Java Web 项目(使用 sdkman)

文章目录 配置 Tomcat将 Tomcat 启动命令设置为 Linux 自定义服务给 Tomcat 设置管理员账号密码IDEA 打包 Java web 项目 我是使用 sdkman 下载的 jdk 和 tomcat&#xff0c;所以接下来的部署配置都是在 sdkman 构建的环境的。想要知道如何下载 sdkman 可以看看这篇文章 —…

cv2.error: OpenCV(4.7.0)

运行hsv脚本报错&#xff1a; cv2.error: OpenCV(4.7.0) D:\a\opencv-python\opencv-python\opencv\modules\imgproc\src\color.cpp:182: error: (-215:Assertion failed) !_src.empty() in function cv::cvtColor 解决方案&#xff1a; 这个错误信息是在使用OpenCV的cvtColor函…

计网实验7

解决&#xff1a;路由器用rip连接&#xff0c;主机通过域名访问&#xff0c;主机之间发送电子邮件 实验步骤 1.搞好部件 2.配好两台主机的ip,掩码&#xff0c;网关 3.连接一下两台主机&#xff0c;由于两台路由器没有连接&#xff0c;所以两台主机也无法连通&#xff0c;丢包率…

Flink优化——数据倾斜(二)

目录 数据倾斜 判断是否存在数据倾斜 数据倾斜的解决 KeyBy之前发生数据倾斜 KeyBy之后发生的数据倾斜 聚合操作存在数据倾斜 窗口聚合操作存在数据倾斜 数据倾斜 判断是否存在数据倾斜 相同 Task 的多个 Subtask 中&#xff0c;个别 Subtask 接收到的数据量明显大于其…

如何快速移植(从STM32F103到STM32F407)

最近用到F4的地方比较多&#xff0c;网上代码还是F1多一些&#xff0c;便需要移植代码&#xff0c;如何快速移植代码呢&#xff1f; 看下面这篇文章 外设 首先就是STM32的外设了。 STM32F407ZGT6的基本外设 STM32F407ZGT6 作为 MCU&#xff0c;该芯片是 STM32F407 里面配置…

价格突然上涨,anzo Capital跟着专业交易者这样做

当交易市场价格突然上涨&#xff0c;让anzo Capital跟着专业交易者&#xff0c;如何操作进行盈利。 我们就以每日BTCUSD价格图为例。锁定交易区用红色突出显示。接下来有一个绿色区域&#xff0c;标志着当时看涨的专业交易者执行的缺口。此外&#xff0c;交易量有所增加&#…

种群的设计(二)

重新复盘了一下种群的特性&#xff0c;除了内在参数外&#xff0c;种群也对应的兴奋性种群和抑制性种群&#xff0c;兴奋种群的神经元释放的脉冲能够增加后神经元的膜电位&#xff0c;而抑制性神经元则相反。那用程序语言描述就是 enum Population_type {EXC,INH };struct Syn…

Anaconda的虚拟环境

Anaconda是一个用于数据科学和机器学习的开源发行版&#xff0c;其中包含了许多常用的数据科学工具和库。虚拟环境&#xff08;Virtual Environment&#xff09;是Anaconda中的一个重要概念&#xff0c;它允许您在同一台机器上创建多个独立的Python环境&#xff0c;每个环境都可…

Python实现FA萤火虫优化算法优化XGBoost回归模型(XGBRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 萤火虫算法&#xff08;Fire-fly algorithm&#xff0c;FA&#xff09;由剑桥大学Yang于2009年提出 , …

【Python常用函数】一文让你彻底掌握Python中的numpy.all函数

大数据时代的到来,使得很多工作都需要进行数据挖掘,从而发现更多有利的规律,或规避风险,或发现商业价值。而大数据分析的基础是学好编程语言。本文和你一起来探索Python中的all函数,让你以最短的时间明白这个函数的原理。也可以利用碎片化的时间巩固这个函数,让你在处理工…

基于yolov2深度学习网络的人员跌倒检测识别matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 YOLOv2深度学习网络 4.2 人员跌倒检测识别原理 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 clc; clear; close all; warning off; a…