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,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
随机推荐
- vscode代码自动补全失效
前段时间,朋友说自己的vscode突然出现了代码不能自动补全的问题(主要是js,其他语言也可以参考) 症状表现为,刚打开vscode有自动补全,过了一会,突然就没了,反反复复 解决过程也是相当坎坷了 ...
- 2019年终总结：10场演讲、内推20人、公众号2万粉丝、Code Runner 1000万下载
2019年是值得记录的一年,成长许多,也收获许多. 做了 10 场大会的技术演讲,成功内推 20 人拿到微软 Offer,知乎 Live 2000 听众,公众号 2 万粉丝,GitHub 2万 sta ...
- Ubuntu18.04 配置Cups PDF虚拟打印机服务
更新 sudo apt update && sudo apt upgrade -y 安装cups pdf服务 sudo apt-get install cups-pdf -y 修改配置 ...
- Winform 中DataGridView、dev Gridview控件添加行标题
有很多种方法. 1.可以在DataGridView控件中的RowStateChanged事件改变行标题单元格的值(Row.HeaderCell.Value) /// <summary> / ...
- Winform中实现自定义屏保效果(附代码下载)
场景 效果 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建form ...
- Wiki语法大全
原文链接:wiki语法大全 编辑一个维客页面十分容易.只要点击页面上方的“编辑本页”或右侧的[编辑]链接即可修改该页,或点击“讨论本页”然后再点击“编辑页面”来讨论该页面.点击后您就会看到一个包含那 ...
- 智能家居手势识别，只需百度AI即可搞定
上次我尝试做了一个给眼镜加特效,针对的是静态图像,具体文章参考 https://ai.baidu.com/forum/topic/show/942890 . 这次我尝试在视频中加眼镜特效,并且加上手势 ...
- mysql与python的交互
mysql是一种关系型数据库,是为了表示事物与事物之间的关系,本身存于数据库中的内容意义并不大,所以广泛应用于编程语言中,python中九含有与MySQL交互的模块 pymysql 编程对mysql的 ...
- Spring Boot Web开发与thymeleaf模板引擎
简介: 使用Springboot应用,选中需要的模块, Spring已经默认将场景配置好了,只需在配置文件中少量配置就可以运行起来 自己编写业务代码 自动配置原理 这个场景Springboot帮我们配 ...
- C# Parallel 多线程并发
Parallel并发执行多个任务 多线程的,主线程会参与计算---阻塞界面等于TaskWaitAll+主线程计算 常用方法 1.Invoke 尽可能并行执行提供的每个操作 Console.Write ...