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,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
随机推荐
- Linux搭建NFS服务
一.NFS服务简单介绍 NFS(Network File System)即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中, ...
- C语言每日一练——第5题
一.题目要求 选出大于100小于1000的所有个位数与十位数字之和被10除所得余数恰好是百位数字的所有数字(如293).计算并输出上述这些素数的个数cnt以及这些素数值得sum,最后把结果cnt和su ...
- js中的对象知识总结
文章目录: 1. 比较两个对象是否相等 1. 比较两个对象是否相等 通过===运算符,只有在两个变量指向同一个对象时才返回true,否则返回false.要想比较两个对象中的内容是否相等,需要利用遍历对 ...
- 《Javascript设计模式与开发实践》--读书笔记
第2章 this call apply bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用. bind( ...
- Caffe源码-Layer类
Layer类简介 Layer是caffe中搭建网络的基本单元,caffe代码中包含大量Layer基类派生出来的各种各样的层,各自通过虚函数 Forward() 和 Backward() 实现自己的功能 ...
- Mysql服务彪高排查方式及索引的正确使用步骤
原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/12af580d-1 ...
- 添加junit和spring-test还是用不了@Test和@RunWith(SpringJUnit4ClassRunner.class)注解
pom.xml依赖如下 <!-- spring 单元测试组件包 --> <dependency> <groupId>org.springframework</ ...
- CAD绘图效率低？教你4个CAD绘图技巧，绘图效率提升十倍
CAD绘图一直是一个谜一样的存在,说它简单吧,很多人都无法完全精通,说它难吧,很多人也都自学成才了. 如何学好CAD绘图是个难题,但是老话说的好,只要思想不滑坡,办法总比困难多,掌握以下这些CAD绘图 ...
- HA: ISRO Vulnhub Walkthrough
下载地址: https://www.vulnhub.com/entry/ha-isro,376/ 主机扫描: ╰─ nmap -p- -sV -oA scan 10.10.202.131Startin ...
- RF之关键字、变量、循环
关键字的使用: RF的能力是由关键字提供的,所以,我们必须对RF的常用关键字有个了解 . 最常用的关键字就在RF的关键字中.http://robotframework.org 其中Builtin是标准 ...