Vue 从入门到进阶之路（十四）
之前的文章我们对 vue 的基础用法已经有了很直观的认识，本章我们来看一下 vue 中的生命周期函数。
上图为 Vue官方为我们提供的完整的生命周期函数的流程图，下面的案例我们只是走了部分情况流程，但所有的生命周期函数都涉及到了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<child v-if="show"></child>
<button @click="handleClick">{{title}}</button>
</div>
<script>
Vue.component("child", {
beforeDestroy() {
console.log("beforeDestroy", this.$el);
},
destroyed() {
console.log("destroyed", this.$el);
},
template: `<p>我是 child 子组件</p>`,
});
var app = new Vue({
el: '#app',
data: {
title: "hello world",
show: true
},
beforeCreate() {
console.log("beforeCreate", this.$el);
},
created() {
console.log("created", this.$el);
},
beforeMount() {
console.log("beforeMounted", this.$el);
},
mounted() {
console.log("mounted", this.$el);
},
beforeUpdate() {
console.log("beforeUpdate", this.$el);
},
updated() {
console.log("updated", this.$el);
},
methods: {
handleClick() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
从上面的代码中我们可以看出 vue 的生命周期函数有：
beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed
这几个生命周期函数的意思分别是：
beforeCreate：组件创建前，
created：组件创建完成，
beforeMount：组件挂载前，
mounted：组件挂载完成，
beforeUpdate：组件更新前，
updated：组件更新完成，
beforeDestroy：组件销毁前，
destroyed：组件成功销毁。
我们通过页面显示和控制台的输出日志来看一下：
当页面加载时会触发 beforeCreate，created，beforeMount，mounted 四个生命周期函数。当执行到 mounted 生命周期函数时，数据才真正挂在到 DOM 上，所以我们从后台获取到的数据可以放在 mounted 生命周期函数中，然后再挂在到 DOM 上。
当我们更改数据时会触发哪些生命周期函数呢，结果如下：
当我们改变数据中的 title 值时，触发了 beforeUpdate 和 updated 生命周期函数。
为了演示 beforeDestroy 和 destroyed 生命周期函数，我们定义了一个子组件，并通过 handleClick() 方法来控制该子组件的挂载和销毁，当我们点击按钮使组件销毁时：
因为我们将 beforeUpdate 和 updated 生命周期函数定义在了父组件上，所以当子组件销毁时也属于父组件更新的一种，所以会触发这两个函数。还触发了 beforeDestroy 和 destroyed 生命周期函数，这两个是在组件销毁时才触发的生命周期函数。
Vue 从入门到进阶之路（十四）的更多相关文章
- Vue 从入门到进阶之路（十二）
之前的文章我们介绍了一下 vue 中插槽的使用,本章我们接着介绍一下 vue 中的作用域插槽. <!DOCTYPE html> <html lang="en"&g ...
- Vue 从入门到进阶之路（十三）
之前的文章我们介绍了一下 vue 中的作用域插槽,本章我们来看一下动态组件与 v-once 指令. <!DOCTYPE html> <html lang="en" ...
- Vue 从入门到进阶之路（十一）
之前的文章我们说了一下 vue 中组件的原生事件绑定,本章我们来所以下 vue 中的插槽使用. <!DOCTYPE html> <html lang="en"&g ...
- React 从入门到进阶之路（四）
之前的文章我们介绍了 React 绑定属性( 绑定class 绑定style).引入图片 循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...
- koa2 从入门到进阶之路 （四）
之前的文章我们介绍了一下 koa 中间件 以及 koa 中间件的洋葱图执行流程,本篇文章我们来看一下 koa 中使用 ejs 模板及页面渲染. 在 Express 中,我们经常会用 ejs 模板来渲染 ...
- Java 从入门到进阶之路（四）
之前的文章我们介绍了 Java 的运算符和表达式,本章我们来看一下 Java 的循环结构. 循环是程序设计语言中反复执行某些代码的一种计算机处理过程,是一组相同或相似语句被有规律的重复性进行. 循环的 ...
- Python 爬虫从入门到进阶之路（四）
之前的文章我们做了一个简单的例子爬取了百度首页的 html,我们用到的是 urlopen 来打开请求,它是一个特殊的opener(也就是模块帮我们构建好的).但是基本的 urlopen() 方法不支持 ...
- Python 从入门到进阶之路（四）
之前的文章我们简单介绍了一下 Python 的几种变量类型,本篇文章我们来看一下 Python 中的函数. 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性, ...
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
随机推荐
- HTML语法简要总结
HTML基本语法 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 常见浏览器内核介绍 浏览器是网页运行的平台,常用的浏览器有IE.火 ...
- python网络编程socket编程（TCP、UDP客户端服务器）
摘录 python核心编程 使用socket()模块函数创建套接字——通信端点 >>> from socket import * >>> tcpSock = soc ...
- 5. abp集成asp.net core
一.前言 参照前篇<4. abp中的asp.net core模块剖析>,首先放张图,这也是asp.net core框架上MVC模块的扩展点 二.abp的mvc对象 AbpAspNetCor ...
- SuperMap iDesktop .NET 10i制图技巧-----如何利用二维平面数据起白膜
1.打开超图的SuperMap iDesktop,加载数据源 udbx其实就是类似于arcgis中的gdb一样的东西,把数据压缩在里面了,这样也可以保证数据的统一集中 2.打开二维面数据,里面的结构如 ...
- ShowDoc速记
编写文档好工具showdoc部署 参考:https://www.showdoc.cc/ 一定要看,一定要用卷,丢失数据的痛苦,痛何如哉. https://www.cnblogs.com/harrych ...
- day06数组、数组声明和赋值、数组复制、数组排序
复习 1.do-while 1)语法 do{ //循环体 }while(<条件>); 2.while和do-while 1)while 先判断,后执行 初始条件不满足,一次都不执行 2)d ...
- MySQL集群高可用
目录 MySQL高可用 Galera Cluster Galera Cluster Galera Cluster特点 Galera Cluster 缺点 Galera Cluster工作过程 Gale ...
- 收到一个神盾局的offer，怎么样？
漫威十一年系列总结性的电影<复联4>正在热映,而衍生出的一部和漫威宇宙关联的美剧<神盾局特工>,今年我也在陆陆续续地看.一开始预期的是一部特工加一些科幻或魔幻元素的剧集,就图看 ...
- 为什么delete后磁盘空间没有释放而truncate会释放？
背景 因项目需求,需要清理一批旧数据,腾出空间给新数据,让同事负责这件事.料想会很顺利,但很快找到我,并告知在postgresql中把一张大的数据表删除掉了,查询表的size并没有改变. 我震惊了,问 ...
- LeetCode H2O 生成
第1117题 现在有两种线程,氢 oxygen 和氧 hydrogen,你的目标是组织这两种线程来产生水分子. 存在一个屏障(barrier)使得每个线程必须等候直到一个完整水分子能够被产生出来. 氢 ...