大家好,又见面了,我是你们的朋友全栈君。
通过前面的介绍我们知道使用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
同样该方法也不好演示,该方法执行的时候,实例已经不可使用了。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106493.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...