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,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
随机推荐
- windows系统下sublime text3开发工具前端配置
1.打开https://www.sublimetext.com/3下载最新版Sublime Text 3安装. 2.打开packagecontrol安装方法按提示安装packagecontrol,或者 ...
- linux之寻找男人的帮助，man和info，
1.在linux下寻求帮助是一个很好的习惯,幸运的是系统提供了帮助的命令man和info,由于linux指令很多,记忆起来简直麻烦,比如以a开头的指令有100条,linux命令算起来得几千条,记忆却是 ...
- .Net中WebService的Demo示例
一.创建一个Web服务 1.新建一个项目WebserverDemo 2.在项目处添加新建项,添加一个web服务 3.编辑TestServer.asmx文件 3.1 TestServer.asmx默认的 ...
- JS---案例：点击按钮摇起来 & 星星闪动 （挺难看的）
案例1:点击按钮摇起来 思路: 1. 2张图片,放进div里面,摇起来的本质是,此div按上下左右的位置和在一定的时间内发生移动 2. 所以用随机数的概念来实现位置的移动,用setInterval来实 ...
- RMAN备份数据库与表空间
脚本: 数据库备份: backup database format='/u01/app/oracle/oradata/Backup/oradb_%d_%s.bak'; 表空间备份:backup tab ...
- Hadoop_HDFS_02
1. HDFS入门 1.1 HDFS基本概念 HDFS是Hadoop Distribute File System的简称, 意为: Hadoop分布式文件系统. 是Hadoop三大核心组件之一, 作为 ...
- java之生产者和消费者问题
package testThread; public class Test3 { public static void main(String[] args) { Clerk c = new Cler ...
- react-组件间的传值
父组件向子组件传值 父组件通过属性进行传递,子组件通过props获取 //父组件 class CommentList extends Component{ render(){ return( < ...
- IT兄弟连 HTML5教程 在移动设备上设置原始大小显示
在iPhone系列和iPod Touch中使用的是Safari浏览器,它支持前面介绍的媒体查询表达式.例如,使用iPhone 320px×480px的分辨率去访问我们前面的布局示例,却无法得到我们想看 ...
- HttpRunner学习1--Windows&Linux安装httprunner
最近在学习HttpRunner,这是一款开源的接口测试框架,可用于HTTP(S)协议的接口测试.通过该框架,我们只需维护一份 YAML/JSON 脚本,即可轻松的进行接口自动化. 更多的介绍,大家可以 ...