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,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
随机推荐
- 分布式事务解决方案，中间件 Seata 的设计原理详解
作者:张乘辉 前言 在微服务架构体系下,我们可以按照业务模块分层设计,单独部署,减轻了服务部署压力,也解耦了业务的耦合,避免了应用逐渐变成一个庞然怪物,从而可以轻松扩展,在某些服务出现故障时也不会影响 ...
- 提示用户输入一个1-40之间的数字，使用if语句根据输入数字的大小进行判断，如果输入的数字在
提示用户输入一个1-40之间的数字,使用if语句根据输入数字的大小进行判断,如果输入的数字在 num_user=input('输入一个1-40之间的整数:') num_int=int(num_user ...
- GTC 2019参会整理
NVIDIA GTC 2019在苏州金湖国际会议中心举行,由于同事有其他会议冲突,所以我代替他来参加了此次会议.作为刚接触GPU和机器学习不久的新人来说,感觉进入了一个新世界,深刻体验到技术的革新迭代 ...
- 如何下载Vimeo视频
MediaHuman YouTube Downloader是应用在Mac上的一款非常优秀的YouTube视频下载工具,YouTube Downloader破解版将帮助你快速完成视频下载,而不会挂断.您 ...
- SpringCloud服务降级案列
一.什么是服务降级 所有的RPC技术里面服务降级是一个最为重要的话题,所谓的降级指的是当服务的提供方不可使用的时候,程序不会出现异常,而会出现本地的操作 二.服务降级案例 1.目录展示 2.导入依赖 ...
- Hacker Fest: 2019 Vulnhub Walkthrough
靶机地址: https://www.vulnhub.com/entry/hacker-fest-2019,378/ 主机扫描: FTP尝试匿名登录 应该是WordPress的站点 进行目录扫描: py ...
- Vue.js实现大文件分片md5断点续传
背景 根据部门的业务需求,需要在网络状态不良的情况下上传很大的文件(1G+).其中会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长,请求超时:3,传输中断,必须重新上传导致前功尽 ...
- Android 列表对话框 setItems
private Button button; private final CharSequence[] items = { "北京", "上海", " ...
- SVN服务器和客户端的下载和安装
一.SVN服务器VisualSVN下载和安装 当前版本:4.1.3下载地址:https://www.visualsvn.com/server/download/下载下来的文件:VisualSVN-Se ...
- Autofac 泛型依赖注入
using Autofac;using Autofac.Extensions.DependencyInjection;using Hangfire;using Microsoft.AspNetCore ...