Vue教程12(实例生命周期介绍)

  通过前面的介绍我们知道使用Vue的时候我们都必须创建一个Vue实例对象,如下

var vm = new Vue({...})

那么这个Vue实例的生命周期是怎么样的呢?本文我们就来详细的介绍下

Vue教程12(实例生命周期介绍)_第1张图片

  此图为Vue官方给出的生命周期图,可先大概浏览下,如果不懂先不管,继续往下看。

Vue实例生命周期

  上图是官方给出的生命周期的流程图。我们一一来介绍下生命周期中各个方法的具体作用,为了便于理解将这些方法分为了三类,分别如下:
创建期间的生命周期函数

方法 说明
beforeCreate 第一个生命周期方法,表示实例被创建出来之前会被调用 ,此时,还没有初始化好 data 和 methods 属性
created 实例已经在内存中创建完成,此时 data 和 methods 已经创建完成,此时还没有开始 编译模板
beforeMount 此时已经完成了模板的编译,但是还没有挂载到页面中
mounted 此时,已经将编译好的模板,挂载到了页面指定的容器中显示

运行期间的生命周期函数

方法 说明
beforeUpdate 状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点
updated 实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

销毁期间的生命周期函数

方法 说明
beforeDestory 实例销毁之前调用。在这一步,实例仍然完全可用。
destoryed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

beforeCreate

  首先我们来看下beforeCreate这个方法,这个方法是生命周期的第一个方法,此时Vue实例中的 data 和 methods的内容都还没有被加载如下:

基础页面


<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>Documenttitle>
    <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方法的效果

Vue教程12(实例生命周期介绍)_第2张图片

Vue教程12(实例生命周期介绍)_第3张图片

  通过页面 控制台 可以看到 data中的数据和 methods中的方法都没有被初始化好。

created

  接下来看下 created 方法,该方法是在Vue实例创建完成后被调用用的,且 data和methods 中的都被初始化好了,我们来测试下。

Vue教程12(实例生命周期介绍)_第4张图片

效果

Vue教程12(实例生命周期介绍)_第5张图片

beforeMount

  beforeMount 执行的时候 已经完成了模板的编译,但是还没有挂载到页面中,我们通过案例来演示下。

Vue教程12(实例生命周期介绍)_第6张图片

效果

Vue教程12(实例生命周期介绍)_第7张图片

  通过效果可以看出 beforeMount 方法执行的时候 内存的中的数据已经被改变了,但是页面中的数据还没有被渲染。

mounted

  mounted方法执行的时候已经将编译好的模板,挂载到了页面指定的容器中显示。

Vue教程12(实例生命周期介绍)_第8张图片
效果

Vue教程12(实例生命周期介绍)_第9张图片

  通过效果也能看出 mounted 方法执行的时候,内存和页面的数据都已经更新了。
注意: mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的躺在我们的内存中,一动不动.

beforeUpdate

  接下来的是运行中的两个方法,beforeUpdate 方法,状态更新之前执行此函数, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点。

Vue教程12(实例生命周期介绍)_第10张图片

Vue教程12(实例生命周期介绍)_第11张图片

  通过效果我们可以看到,当beforeUpdate方法执行的时候,内存的数据被更新了,但是此时 页面中的数据还没有被更新。

updated

  实例更新完毕之后调用此函数,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

Vue教程12(实例生命周期介绍)_第12张图片
效果

Vue教程12(实例生命周期介绍)_第13张图片

  通过效果可以看到,当 updated方法执行的时候,内存和页面中的数据都已经被更新了!

beforeDestory

  beforeDestory 效果不太好演示,实例销毁之前调用。在这一步,实例仍然完全可用,大家记住这个即可

destoryed

  同样该方法也不好演示,该方法执行的时候,实例已经不可使用了。

你可能感兴趣的:(Vue资料)