生命函数的执行顺序

从上方的流程图中可以了解生命周期都是有顺序执行的，如以下代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛"
        },
        methods:{
    
        },
        created(){  // 创建created生命周期函数，该函数经常使用
            console.log("调用created函数")
        },
        beforeCreate(){  // 创建beforeCreate生命周期函数
            console.log("调用beforecreate函数")
        },

        mounted(){
            console.log("调用mounted函数")
        }
    })
</script>

25-34行调用了3个生命周期函数，分别是created、beforecreated、mounted，根据流程图中规定的执行顺序，生命周期函数会按照规定的顺序执行，而不是按照位置顺序执行。

测试页面:

可以成功验证生命周期函数不会因为位置顺序而改变执行顺序。

常用的生命周期介绍

常用的生命周期函数主要是created和mounted,下面着重介绍这两个生命周期。

created

created生命周期主要是初始化Vue示例的data数据和methods方法，所以初始化首页数据的ajax请求应该在created函数中去执行。

注意这个时候页面还没有渲染完成，DOM结构也没有渲染完成，所以在created生命周期中去获取页面中属性绑定的{{}}值时是无法获取到真实值的，只能获取到js的变量名。

mounted

mounted生命周期执行时，标志了页面的首次渲染完成，并且可以通过操作DOM对象来获取{{}}中的值，可以给其他三方UI组件初始化使用，所以调用页面中的{{}}值需要在mounted中来进行。

created和mounted对比

结合上面对created和mounted介绍，现在对这两个生命周期做一个实践对比。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div id="out">{{title}}</div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            title:"冒险岛"
        },
        methods:{
    
        },
        created(){  // 创建created生命周期函数，该函数经常使用
            console.log("调用created")
            var out=document.getElementById("out")
            console.log(out)
        },
        mounted(){
            console.log("调用mounted函数")
            var out=document.getElementById("out")
            console.log(out)
        }
    })
</script>

测试页面控制台: