Vue35-生命周期小结

一、8个,4对生命周期函数

第一对:数据监测、数据代理,创建之前和创建之后。

注意:不是vm的创建!!!

第二队:beforeMount和mounted 

第三队:beforeUpdate和update

第四队:beforeDestroy和destroy

 

二、重要的钩子函数

 

三、vm.$destroy()说明

3-1、示例1:透明度需求的优化

添加按钮,停止透明度的变化。

 

 

解决方式1: 

解决方式二:

在 Vue 中,你确实没有在 data 选项中明确定义 timer,但是 Vue 实例在运行时会自动给实例添加一个响应式之外的 _data 对象来存储数据,并且 Vue 实例本身(也就是 this)会代理这个 _data 对象上的属性,使得你可以通过 this.someDataProperty 的形式来访问或修改它们。

但是,当你试图在 Vue 实例上添加一个不在 data 函数中返回的对象属性时(比如 this.timer),Vue 不会把这个属性变成响应式的。这意味着,如果你尝试在模板中直接使用 {{ timer }},Vue 会警告你 timer 不是响应式属性。但是,这并不会阻止你在 Vue 实例的方法或生命周期钩子中使用它,因为 this.timer 只是一个普通的 JavaScript 属性。

在你的例子中,timer 被用作 setInterval 的返回值(一个表示定时器的ID),它被存储在 Vue 实例上(即 this.timer)。因为 timer 并不需要在模板中显示或作为计算属性依赖,所以没有在 data 中定义它并不会导致错误。

简而言之,Vue 不会报错是因为 timer 并没有被声明为一个需要在模板中显示或作为响应式数据追踪的属性。它只是作为一个普通的 JavaScript 属性被存储在 Vue 实例上,用于在 Vue 实例的方法或生命周期钩子中访问和操作。

3-2、示例2:需求优化:透明度停下来后,整个vm都销毁,vm中的data数据也销毁,不再能改!

注意:此时,定时器还没有关!

解决方式如下:

备注:

还有3个钩子没有说,等到说路由的时候,讲解。

四、小结:

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

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

相关文章

ElasticSearch的桶聚合

桶聚合 在前面几篇博客中介绍的聚合指标是指符合条件的文档字段的聚合,有时还需要根据某些维度进行聚合。例如在搜索酒店时,按照城市、是否满房、标签和创建时间等维度统计酒店的平均价格。这些字段统称为“桶”,在同一维度内有一个或者多个桶。例如城市桶,有“北京”、“天…

input输入框禁止输入小数点方法

使用blur事件&#xff1a; <el-input v-model"number" type"number" placeholder"请输入" blur"numberBlur" /> 第一种&#xff1a; 使用parseInt转为整数&#xff1a; this.number parseInt(this.number);第二种&#xff…

MAC地址详解

一、MAC地址 MAC地址&#xff0c;英文全称为Media Access Control&#xff0c;前面我们就介绍过MAC地址&#xff0c;MAC地址也称为物理地址或者硬件地址&#xff0c;每个网卡都有一个MAC地址&#xff0c;是数据在实际传输过程中所用到的地址。 二、 MAC组成 前面就介绍过&…

vue-element-admin后台集成方案

官网&#xff1a;介绍 | vue-element-adminA magical vue adminhttps://panjiachen.github.io/vue-element-admin-site/zh/guide 1.git环境安装配置及简单操作 1.1git环境安装配置 git软件官网&#xff1a;Git - Downloads (git-scm.com)https://git-scm.com/downloads 下载…

印尼slot游戏pwa做Facebook广告代投推广流程

印尼slot游戏pwa做Facebook广告代投推广流程 随着互联网的普及和移动设备的广泛应用&#xff0c;社交媒体平台如Facebook成为了企业和个人进行品牌推广的重要渠道。在印尼的slot游戏行业中&#xff0c;利用PWA&#xff08;Progressive Web App&#xff09;技术进行Facebook广告…

第N4周:中文文本分类-Pytorch实现

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 目录 一、准备工作 1.任务说明 文本分类流程图&#xff1a; 2.加载数据 ​编辑 二、…

conda添加镜像源与channels

文章目录 一、conda下添加国内镜像源&#xff08;window下&#xff09;二、pip配置国内镜像源&#xff08;window下&#xff0c;临时修改&#xff09;三、conda源的定义 一、conda下添加国内镜像源&#xff08;window下&#xff09; 1、为【channels】配置清华镜像通道 直接在…

【Pandas】已完美解决:AttributeError: ‘DataFrame‘ object has no attribute ‘ix‘

文章目录 一、问题背景二、可能出错的原因三、错误代码示例四、正确代码示例&#xff08;结合实战场景&#xff09;五、注意事项 一、问题背景 在Pandas的早期版本中&#xff0c;ix 是一个方便的索引器&#xff0c;允许用户通过标签和整数位置来索引DataFrame的行和列。然而&a…

Flask-Logging

Flask-Logging 教程 概述 flask-logging 是一个用于在 Flask 应用中实现高级日志记录功能的库。它能够帮助开发者轻松地配置和管理日志&#xff0c;适用于开发和生产环境。通过使用 flask-logging&#xff0c;可以更好地监控应用的运行状态和调试问题。 官方文档 Flask-Log…

Pixi.js学习 (四)鼠标跟随、元素组合与图片位控

目录 一、鼠标移动跟随 1.1 获取鼠标坐标 1.2 鼠标跟随 二、锚点、元素组合 2.1 锚点 2.2 元素组合 三、图片图层 四、实战 例题一&#xff1a;完成合金弹头人物交互 例题二&#xff1a;反恐重击瞄准和弹痕 例题一代码&#xff1a; 例题二代码&#xff1a; 总结 前言 为了提高作…

ADS基础教程20 - 电磁仿真(EM)参数化

EM介绍 一、引言二、参数化设置1.参数定义2.参数赋值3.创建EM模型和符号 四、总结 一、引言 参数化EM仿真&#xff0c;是在Layout环境下创建参数&#xff0c;相当于在原理图中声明变量。 二、参数化设置 1.参数定义 1&#xff09;在Layout视图&#xff0c;菜单栏中选中EM&g…

QMap使用详解

QMap使用详解 1. 实例化 QMap 对象2. 插入数据3. 移除数据4. 遍历数据5. 由键查找对应键值6. 由键值查找键7. 修改键值8. 查找是否包含某个键9. 获取所有的键和键值10.清除数据11.一个键对应多个值12.QMultiMap 遍历数据13.完整示例代码14.使用自定义键类型的 QMap示例&#xf…

大模型出现的不断重复的现象

无论是大语言模型还是多模态模型,都遇到过这个问题,该如何解决呢? 1.调整推理参数 [BUG] 返回重复的内容 Issue #277 QwenLM/Qwen GitHub是否已有关于该错误的issue或讨论? | Is there an existing issue / discussion for this? 我已经搜索过已有的issues和讨论 | I…

【Linux】基础IO——系统文件IO

我之前是讲过c语言的文件操作的&#xff0c;但是说实话我压根就不知道它在干什么&#xff0c;后面c语言/c,数据结构的学习过程中也没用过文件操作&#xff0c;今天我们就来会会这个文件操作 1.回顾c语言文件接口 1.1.fopen r &#xff1a;只读模式打开&#xff0c;文件流指针…

Java程序员英语单词通关:

Java程序员英语单词通关&#xff1a; abstract - 抽象的 boolean - 布尔值 break - 打断 byte - 字节 case - 情况&#xff0c;实例 catch - 捕获 char - 字符 class - 类 continue - 继续 default - 默认&#xff0c;通常 do - 做&#xff0c;运行 double - 双精度…

【LeetCode 92.】 反转链表 II

1.题目 虽然本题很好拆解&#xff0c;但是实现起来还是有一些难度的。 2. 分析 尽可能抽象问题&#xff0c;然后简化代码 我在写本题的时候&#xff0c;遇到了下面这两个问题&#xff1a; 没有把[left,right] 这个区间的链表给断开&#xff0c;所以导致反转起来非常麻烦。…

【iOS】KVO相关总结

目录 1. 什么是KVO&#xff1f;2. KVO的基本使用3. KVO的进阶使用observationInfo属性context 的使用KVO触发监听方法的方式自动触发手动触发 KVO新旧值相等时不触发KVO的从属关系一对一关系一对多关系 4. KVO使用注意5. KVO本质原理分析伪代码保留伪代码下的类并编译运行对比添…

JVM垃圾回收的普遍步骤

JVM&#xff08;Java Virtual Machine&#xff09;进行垃圾回收时&#xff0c;通常遵循以下步骤。不同的垃圾收集器可能会有一些不同的实现细节&#xff0c;但基本步骤和思想大致相同。以下是一般的垃圾回收过程的主要步骤&#xff1a; 1. 标记阶段&#xff08;Marking Phase&…

小白都能看懂的 “栈”

什么是栈&#xff1f;首先引用维基百科的解释&#xff1a; 栈&#xff08;stack&#xff09;是计算机科学中的一种抽象资料类型&#xff0c;只允许在有序的线性资料集合的一端&#xff08;称为堆栈顶端&#xff0c;top&#xff09;进行加入数据&#xff08;push&#xff09;和移…

Go语言结构体内嵌接口

前言 在golang中&#xff0c;结构体内嵌结构体&#xff0c;接口内嵌接口都很常见&#xff0c;但是结构体内嵌接口很少见。它是做什么用的呢&#xff1f; 当我们需要重写实现了某个接口的结构体的(该接口)的部分方法&#xff0c;可以使用结构体内嵌接口。 作用 继承赋值给接口…