大家好，又见面了，我是你们的朋友全栈君。
通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象，如下
var vm = new Vue({...})
那么这个Vue实例的生命周期是怎么样的呢？本文我们就来详细的介绍下
此图为Vue官方给出的生命周期图，可先大概浏览下，如果不懂先不管，继续往下看。
Vue实例生命周期
上图是官方给出的生命周期的流程图。我们一一来介绍下生命周期中各个方法的具体作用,为了便于理解将这些方法分为了三类，分别如下:
创建期间的生命周期函数
方法 | 说明
------------ | -------------------------------------------------------
beforeCreate | 第一个生命周期方法，表示实例被创建出来之前会被调用 ,此时，还没有初始化好 data 和 methods 属性
created | 实例已经在内存中创建完成，此时 data 和 methods 已经创建完成，此时还没有开始 编译模板
beforeMount | 此时已经完成了模板的编译，但是还没有挂载到页面中
mounted | 此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数
方法 | 说明
------------ | -----------------------------------------------------------------
beforeUpdate | 状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
updated | 实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
销毁期间的生命周期函数
方法 | 说明
------------- | ------------------------------------------------------------
beforeDestory | 实例销毁之前调用。在这一步，实例仍然完全可用。
destoryed | Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
beforeCreate
首先我们来看下beforeCreate这个方法，这个方法是生命周期的第一个方法，此时Vue实例中的 data 和 methods的内容都还没有被加载如下:
基础页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
<script >
var vm = new Vue({
el: "#app",
data: {
msg: 'ok'
},
methods: {
show: function(){
console.log("show 方法执行了...")
}
}
})
</script>
</body>
</html>
然后我们来看下 beforeCreate方法的效果
通过页面 控制台 可以看到 data中的数据和 methods中的方法都没有被初始化好。
created
接下来看下 created 方法，该方法是在Vue实例创建完成后被调用用的，且 data和methods 中的都被初始化好了，我们来测试下。
效果
beforeMount
beforeMount 执行的时候 已经完成了模板的编译，但是还没有挂载到页面中,我们通过案例来演示下。
效果
通过效果可以看出 beforeMount 方法执行的时候 内存的中的数据已经被改变了，但是页面中的数据还没有被渲染。
mounted
mounted方法执行的时候已经将编译好的模板，挂载到了页面指定的容器中显示。
效果
通过效果也能看出 mounted 方法执行的时候，内存和页面的数据都已经更新了。
注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动.
beforeUpdate
接下来的是运行中的两个方法，beforeUpdate 方法，状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点。
通过效果我们可以看到，当beforeUpdate方法执行的时候，内存的数据被更新了，但是此时 页面中的数据还没有被更新。
updated
实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
效果
通过效果可以看到，当 updated方法执行的时候，内存和页面中的数据都已经被更新了！
beforeDestory
beforeDestory 效果不太好演示，实例销毁之前调用。在这一步，实例仍然完全可用，大家记住这个即可
destoryed
同样该方法也不好演示，该方法执行的时候，实例已经不可使用了。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/106492.html原文链接：https://javaforall.net
