【生命周期】

生命周期

  • 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.hqwc.cn/news/124055.html

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

相关文章

微服务技术栈-认识微服务和第一个微服务Demo

微服务技术栈-认识微服务和第一个微服务Demo

文章目录 前言一、认识微服务二、微服务技术栈三、Eureka注册中心四、微服务DEMO1、搭建eureka-server2、服务注册和服务发现 总结 前言 随着业务的不断复杂&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。 本章就从微服…
阅读更多...
【JVM】垃圾回收（GC）详解

【JVM】垃圾回收（GC）详解

垃圾回收&#xff08;GC&#xff09;详解 一. 死亡对象的判断算法1. 引用计数算法2. 可达性分析算法 二. 垃圾回收算法1. 标记-清除算法2. 复制算法3. 标记-整理算法4. 分代算法 三. STW1. 为什么要 STW2. 什么情况下 STW 四. 垃圾收集器1. CMS收集器&#xff08;老年代收集器&…
阅读更多...
算法-动态规划/trie树-单词拆分

算法-动态规划/trie树-单词拆分

算法-动态规划/trie树-单词拆分 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/word-break/description/?envTypestudy-plan-v2&envIdtop-interview-150 1.2 题目描述 2 动态规划 2.1 解题思路 dp[i]表示[0, i)字符串可否构建那么dp[i]可构建的条件是&…
阅读更多...
【计算机网络黑皮书】应用层

【计算机网络黑皮书】应用层

【事先声明】 这是对于中科大的计算机网络的网课的学习笔记&#xff0c;感谢郑烇老师的无偿分享 书籍是《计算机网络&#xff08;自顶向下方法 第6版&#xff09;》 需要的可以私信我&#xff0c;无偿分享&#xff0c;课程简介下也有 课程连接 目录 应用层网络应用的原理应用架…
阅读更多...
Linux使用之xshell、xftp保姆教学（含安装包，详细使用方法，连接失败解决方法）

Linux使用之xshell、xftp保姆教学（含安装包，详细使用方法，连接失败解决方法）

前言 链接: FTP&#xff0c;SSH服务器介绍 这是我之前写的一篇博客&#xff0c;其中介绍了Ubuntu操作系统的一些常用命令以及服务器介绍&#xff0c;这篇文章就向大家详细介绍如何安装及应用这些服务器&#xff0c;我以xshell、xftp为例。 安装包&#xff0c;使用方法&#xf…
阅读更多...
快速上手Apache POI

快速上手Apache POI

哈喽~大家好&#xff0c;这篇我们来看看快速上手Apache POI。 &#x1f947;个人主页&#xff1a;个人主页​​​​​ &#x1f948; 系列专栏&#xff1a;【日常学习上的分享】 &#x1f949;与这篇相关的文章&#xff1a; Red…
阅读更多...
认识柔性数组

认识柔性数组

在C99中&#xff0c;结构中的最后一个元素允许是未知大小的数组&#xff0c;这就叫做柔性数组成员 限制条件是&#xff1a; 结构体中最后一个成员未知大小的数组 1.柔性数组的形式 那么我们怎样写一个柔性数组呢 typedef struct st_type {int i;int a[0];//柔性数组成员 }ty…
阅读更多...
Moonbeam Ignite强势回归

Moonbeam Ignite强势回归

参与Moonbeam上最新的流动性计划 还记得新一轮的流动性激励计划吗&#xff1f;Moonbeam Ignite社区活动带着超过300万枚GLMR奖励来啦&#xff01;体验新项目&#xff0c;顺便薅一把GLMR羊毛。 本次Moonbeam Ignite活动的参与项目均为第二批Moonbeam生态系统Grant资助提案中获…
阅读更多...
北京开发APP需要多少钱

北京开发APP需要多少钱

北京开发一个移动应用&#xff08;APP&#xff09;的费用因多种因素而异&#xff0c;包括项目的规模、复杂性、所需功能、设计要求、技术选择、开发团队的经验和地理位置等。一般来说&#xff0c;北京的APP开发费用通常较高&#xff0c;因为这是中国的主要技术和创新中心之一&a…
阅读更多...
堆优化迪氏最短单源路径原理及C++实现

堆优化迪氏最短单源路径原理及C++实现

时间复杂度 O(ElogE)&#xff0c;E是边数。适用与稀疏图。 使用前提 边的权为正。可以非连通&#xff0c;非连通的距离为-1。 原理 优选队列&#xff08;小根堆&#xff09;记录两个数据&#xff1a;当前点到源点距离&#xff0c;当前点。先处理距离小的点&#xff1b;如果…
阅读更多...
传输层协议——TCP、UDP

传输层协议——TCP、UDP

目录 1、UDP 协议&#xff08;用户数据报协议&#xff09; 协议特点 报文首部格式 2、TCP 协议&#xff08;传输控制协议&#xff09; 协议特点 报文首部格式 TCP连接建立时的三次握手 TCP拆除连接的四次挥手 TCP的流量控制 TCP的拥塞控制 3、传输层端口号 三类端口…
阅读更多...
【C++】设计模式之——建造者

【C++】设计模式之——建造者

建造者模式概念模拟实现建造者模式代码实现 建造者模式 首先先大体了解一下&#xff0c;建造者模式是什么意思&#xff0c;它是怎么实现的&#xff1f; 首先&#xff0c;建造者模式是一种创建型设计模式再一个它是使用多个简单的对象一步一步的搭建出一个复杂的对象它可以将一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023