Vue 从入门到进阶之路（十四）

之前的文章我们对 vue 的基础用法已经有了很直观的认识，本章我们来看一下 vue 中的生命周期函数。

上图为 Vue官方为我们提供的完整的生命周期函数的流程图，下面的案例我们只是走了部分情况流程，但所有的生命周期函数都涉及到了。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue</title>
 6     <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <child v-if="show"></child>
11     <button @click="handleClick">{{title}}</button>
12 </div>
13 <script>
14     Vue.component("child", {
15         beforeDestroy() {
16             console.log("beforeDestroy", this.$el);
17         },
18         destroyed() {
19             console.log("destroyed", this.$el);
20         },
21         template: `<p>我是 child 子组件</p>`,
22     });
23     var app = new Vue({
24         el: '#app',
25         data: {
26             title: "hello world",
27             show: true
28         },
29         beforeCreate() {
30             console.log("beforeCreate", this.$el);
31         },
32         created() {
33             console.log("created", this.$el);
34         },
35         beforeMount() {
36             console.log("beforeMounted", this.$el);
37         },
38         mounted() {
39             console.log("mounted", this.$el);
40         },
41         beforeUpdate() {
42             console.log("beforeUpdate", this.$el);
43         },
44         updated() {
45             console.log("updated", this.$el);
46         },
47         methods: {
48             handleClick() {
49                 this.show = !this.show;
50             }
51         }
52     })
53 </script>
54 </body>
55 </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 生命周期函数，这两个是在组件销毁时才触发的生命周期函数。

转载于:https://www.cnblogs.com/weijiutao/p/10684448.html

Vue 从入门到进阶之路（十四）相关推荐

koa2 从入门到进阶之路（四）
之前的文章我们介绍了一下 koa 中间件以及 koa 中间件的洋葱图执行流程,本篇文章我们来看一下 koa 中使用 ejs 模板及页面渲染. 在 Express 中,我们经常会用 ejs 模板来渲染 ...
Python 爬虫从入门到进阶之路（四）
之前的文章我们做了一个简单的例子爬取了百度首页的 html,我们用到的是 urlopen 来打开请求,它是一个特殊的opener(也就是模块帮我们构建好的).但是基本的 urlopen() 方法不支持 ...
Python 进阶之路 (十二) 尾声即是开始
Python进阶之路总结大家好,我的<< Python进阶之路>>到这一期就到此为止了,和 <<Python 基础起步>>不同,在掌握了一些基础知识后 ...
Linux Shell脚本入门教程系列之（十四） Shell Select教程
本文是Linux Shell脚本系列教程的第(十四)篇,更多Linux Shell教程请看:Linux Shell脚本系列教程在上一篇文章:Linux Shell系列教程之(十三)Shell分支语句 ...
六级考研单词之路-十四
title: 六级考研单词之路-十四 date: 2020-12-01 11:11:45 tags: 六级考研单词之路 Day14 1.grant[v.允许,承认,授予:n.授予物,补助金,同意] e ...
MySQL数据库，从入门到精通：第十四篇——MySQL视图详解
MySQL数据库,从入门到精通:第十四篇--MySQL视图详解第 14 篇_视图 1. 常见的数据库对象 2. 视图概述 2. 1 为什么使用视图? 2. 2 视图的理解 3. 创建视图 3. 1 ...
黎想深度访谈腾讯顶级产品经理的进阶之路——第四篇《时机》
16个月精心打磨,9位顶级产品专家研讨提炼,凝聚腾讯产品经验的八集八分钟产品课分别从用户.定位.需求.时机.匠心.危机.合作.商业角度出发,还原产品背后的故事,分享给你腾讯产品的心法.艺形艺意工作室创 ...
车辆动力学从入门到进阶之路（传统篇）
编辑:CrazyRabbit 日期:2022年6月16日本文主要讲一下车辆动力学如何入门,如何进阶,供想进入该领域的工程师参考. 本篇主要讲的是传统领域,不包含电控开发. 0. 前言何为车辆动力学 ...
小程序onload_微信小程序开发入门之共享账本（十四）
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...

Vue 从入门到进阶之路（十四）

Vue 从入门到进阶之路（十四）相关推荐

最新文章

热门文章