【生命周期】

生命周期

  • 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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

windows WSL配置cuda，pytorch和jupyter notebook

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是这…
阅读更多...
【数据结构与算法】- 数组

【数据结构与算法】- 数组

数组 1.1 数组的定义1.2 数组的创建1.3 数组在内存中的情况2.1 初始化数组2.2 插入元素2.3 删除元素2.4 读取元素2.5 遍历数组 1.1 数组的定义 数组中的是在内存中是连续存储的&#xff0c;内存是由一个个内存单元组成的&#xff0c;每一个内存单元都有自己的地址&#xff0c;…
阅读更多...
SpringBoot中使用Servlet和Filter

SpringBoot中使用Servlet和Filter

为什么要把Servlet和Filter写在一起,因为使用方式很相似 两种方式 第一种,使用Servlet和Filter 使用Servlet 继承HttpServlet 注册Servlet 使用Filter 1.自定义过滤器 2.注册过滤器 这里注意一点 使用/**无效 至少我这2.4.5版本是这样 过滤所有请求用/* 那么其实还有…
阅读更多...
嵌入式Linux应用开发-驱动大全-第一章同步与互斥①

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

嵌入式Linux应用开发-驱动大全-第一章同步与互斥① 第一章 同步与互斥①1.1 内联汇编1.1.1 C语言实现加法1.1.2 使用汇编函数实现加法1.1.3 内联汇编语法1.1.4 编写内联汇编实现加法1.1.5 earlyclobber的例子 1.2 同步与互斥的失败例子1.2.1 失败例子11.2.2 失败例子21.2.3 失败…
阅读更多...
高層建築設計和建造：從避難層到設備間和防風防火防水的設計理念，酒店住宅辦公樓都有什麽房間（精簡）

高層建築設計和建造：從避難層到設備間和防風防火防水的設計理念，酒店住宅辦公樓都有什麽房間（精簡）

樓層概覽 標準層居住、辦公、商業等功能的樓層。結構和裝修與其他樓層相同&#xff0c;可供人正常居住、工作和活動避難層專門用於人員避難的樓層&#xff0c;通常會相隔數十個標準層&#xff0c;樓梯通常和標準層是錯開的(非公用)&#xff0c;具有更多的通風口。牆體和樓板具…
阅读更多...
嵌入式Linux应用开发-驱动大全-第一章同步与互斥②

嵌入式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…
阅读更多...
传输层协议——TCP、UDP

传输层协议——TCP、UDP

目录 1、UDP 协议&#xff08;用户数据报协议&#xff09; 协议特点 报文首部格式 2、TCP 协议&#xff08;传输控制协议&#xff09; 协议特点 报文首部格式 TCP连接建立时的三次握手 TCP拆除连接的四次挥手 TCP的流量控制 TCP的拥塞控制 3、传输层端口号 三类端口…
阅读更多...
北京开发APP需要多少钱

北京开发APP需要多少钱

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

力扣刷题-哈希表-三数之和

15 三数之和 给你一个包含 n 个整数的数组 nums&#xff0c;判断 nums 中是否存在三个元素 a&#xff0c;b&#xff0c;c &#xff0c;使得 a b c 0 &#xff1f;请你找出所有满足条件且不重复的三元组。 注意&#xff1a; 答案中不可以包含重复的三元组。 示例&#xff1a…
阅读更多...
uni-app使用iconfont字体图标

uni-app使用iconfont字体图标

先iconfont选择好自己需要的图标 添加至项目 下载字体文件到本地 将下载的文件解压缩到工程目录static文件夹下 定义好iconfont.css文件的font-face声明,修改好引入的url地址 打开App.vue文件 ,引入static下刚才修改的iconfont.css字体图标文件 完成上线的步骤后就可以全局使用…
阅读更多...
电脑右键新建记事本不见了--设置恢复篇（无需操作注册表）

电脑右键新建记事本不见了--设置恢复篇（无需操作注册表）

电脑右键新建记事本不见了–设置恢复篇&#xff08;无需修改注册表&#xff09; 电脑不知怎么想右键新建记事本结果竟然不见了&#xff0c;搜寻网上的都是什么修改注册表&#xff0c;粘贴代码修复&#xff08;感觉太复杂了&#xff09;&#xff0c;这里介绍通过设置内重新对记…
阅读更多...
IDEA中的神仙插件——Smart Input （自动切换输入法）

IDEA中的神仙插件——Smart Input （自动切换输入法）

推荐专栏&#xff1a;开发环境配置攻略 致力于记录学习过程中各种软件的安装及环境配置操作&#xff0c;并提供详细的步骤说明和丰富的配图。涵盖了 Java、Python、IntelliJ IDEA、Tomcat、MySQL 等常见开发工具和服务器组件的配置&#xff0c;为初学者提供一个实用、全面的配置…
阅读更多...
【云备份项目】：环境搭建（g++、json库、bundle库、httplib库）

【云备份项目】：环境搭建（g++、json库、bundle库、httplib库）

文章目录 1. g 升级到 7.3 版本2. 安装 jsoncpp 库3. 下载 bundle 数据压缩库4. 下载 httplib 库从 Win 传输文件到 Linux解压缩 1. g 升级到 7.3 版本 &#x1f517;链接跳转 2. 安装 jsoncpp 库 &#x1f517;链接跳转 3. 下载 bundle 数据压缩库 安装 git 工具 sudo yum…
阅读更多...
05_对象性能模式

05_对象性能模式

对象性能模式 面向对象很好地解决了“抽象”的问题,但是必不可免地要付出定的代价。对于通常情况来讲&#xff0c;面向对象的成本大都可以忽略计。但是某些情况&#xff0c;面向对象所带来的成本必须谨慎处理。 典型模型&#xff1a; SingletonFlyweight Singleton 单件模式…
阅读更多...
计算机毕业设计 基于SSM的在线预约导游系统的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 基于SSM的在线预约导游系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
非目标代谢组学（untargeted metabolomics）中常用的方法学考察的方法（四）

非目标代谢组学（untargeted metabolomics）中常用的方法学考察的方法（四）

QC样本的制备&#xff1a; 混合相同体积的所有待检测样本&#xff0c;然后按照与待测样本相同的前处理方法来处理QC样本&#xff0c;之后进样进行LC-MS分析。 样本检测时&#xff0c;通常在检测最开始运行几次QC样本&#xff0c;之后根据样本量的大小在每检测几个样本之后检测…
阅读更多...
什么是JWT?深入理解JWT从原理到应用

什么是JWT?深入理解JWT从原理到应用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《ELement》。&#x1f3af;&#x1f3af; &#x1…
阅读更多...
16,8和4位浮点数是如何工作的

16,8和4位浮点数是如何工作的

50年前Kernighan、Ritchie和他们的C语言书的第一版开始&#xff0c;人们就知道单精度“float”类型有32位大小&#xff0c;双精度类型有64位大小。还有一种具有扩展精度的80位“长双精度”类型&#xff0c;这些类型几乎涵盖了浮点数据处理的所有需求。但是在最近几年&#xff0…
阅读更多...
认识柔性数组

认识柔性数组

在C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员 限制条件是&#xff1a; 结构体中最后一个成员未知大小的数组 1.柔性数组的形式 那么我们怎样写一个柔性数组呢 typedef struct st_type {int i;int a[0];//柔性数组成员 }ty…
阅读更多...
【Kafka专题】Kafka收发消息核心参数详解

【Kafka专题】Kafka收发消息核心参数详解

目录 前置知识课程内容一、从基础的客户端说起&#xff08;Java代码集成使用&#xff09;1.1 消息发送者源码示例1.2 消息消费者源码示例1.3 客户端使用小总结 *二、从客户端属性来梳理客户端工作机制*2.1 消费者分组消费机制2.2 生产者拦截器机制2.3 消息序列化机制2.4 消息分…
阅读更多...
最新文章

Copyright @ 2022~2023