一：前言

笔者最近在学习Vue，听说学好了Vue的生命周期就学懂了一半的Vue。所以，建议大家认真学好。 接下来，笔者将会用"笨"方法来讲解Vue的生命周期。 讲解版本：Vue.js v2.6.11

二：操作

1.简介

Vue的生命周期也叫钩子函数，是Vue从创建到销毁所触发的函数。 详细点就是从开始创建、初始化数据、编译模板、挂载Dom、渲染->更新->渲染、销毁等一系列操作。

2.文字版

Vue的生命周期包含了八个生命周期方法。 笔者把它分成分成三个阶段：

一：创建阶段生命周期方法：

①beforeCreate();

beforeCreate(){ console.log("创建之前"); }

表示实例完全被创建之前执行。此时data和methods中的数据和方法都还没有被初始化。在这里获取不到data中的数据。 ②created();

created(){ console.log("创建完成"); }

data和methods被初始化好了。在这里操作不了data中的数据，也调用不了methods中的方法，最早只能在created中操作或调用。 ③beforeMount();

beforeMount(){ console.log("挂载之前"); }

内存中已经编译好了模板，但是没有把模板渲染到页面上。 ④mounted();

mounted(){ console.log("挂载完成"); }

内存中的模板已经挂载到页面中，用户可以看到渲染好的页面。

二：运行阶段生命周期方法：

⑤beforeUpdate();

beforeUpdate(){ console.log("页面上元素的内容:" + document.getElementById("h3").innerText); console.log("data中的msg数据是:" + this.msg); }

这里执行方法时，页面中的数据还是旧的，data中的数据是最新的，页面尚未和最新的数据保持同步。 ⑥updated();

updated(){ console.log("更新完成"+this.message); console.log("页面上元素的内容:" + document.getElementById("h3").innerText); console.log("data中的msg数据是:" + this.msg); }

这里执行方法时，页面和data中的数据已经保持同步了，都是最新的。

三：销毁阶段的生命周期方法：

⑦beforeDestroy();

beforeDestroy(){ console.log("销毁之前"); }

这里表示Vue实例即将销毁，但是还未销毁，实例中的数据都可以使用。 ⑧destroyed();

destroyed(){ console.log("销毁了"); }

这里表示Vue实例完全销毁，实例中的任何内容都不能被使用了。

补充说明： 这个new出来的app对象就是Vue实例。

var app = new Vue({ el: '#app', data: { msg: "hello world!" }, methods:{ onclicktest: function(){ console.log("It is an onclicktest function!"); } } })

3.图解版

笔者将官网的生命周期图加了注解，制作出这张图解版生命周期图。

三：尾言

Vue实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。