Vue生命周期函数

原创已于 2022-02-18 09:56:06 修改 · 479 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-02-17 17:43:55 首次发布

本文详细介绍了Vue应用的生命周期，从beforeCreate到created，再到beforeMount、mounted各个阶段的执行顺序和作用。在beforeCreate阶段，Vue开始处理事件绑定；created阶段，分析数据和模板绑定；接着判断是否存在template并结合数据生成函数；beforeMount执行前，模板变为函数；最后在mounted阶段，新DOM替换旧元素，完成页面渲染。

文章目录

生命周期函数

生命周期函数

生命周期函数：在某一时刻会自动执行的函数。

beforeCreate()

在你写好app=Vue.createApp()beforeCreate(),app.mount()之后，Vue就开始它内部的逻辑，首先它会考虑事件的绑定，当它进行完逻辑初始化之后就会开始beforeCreate()的生命周期函数。
如：

<!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="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
```const app= Vue.createApp({
        data() {
            return{
                message:"hello world"
            }
        },
            beforeCreate()
            {
                console.log("befoeCreate");
            },   
        template: "<div>{{message}}</div>"
    });
    const t=app.mount('#root');
</script>

</html>

created()

在进行完beforeCreate()的生命周期函数后，就会开始分析数据以及模板间绑定的相关内容。然后执行第二个生命周期函数，名为created()周期函数。
如：

<!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="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
```const app= Vue.createApp({
        data() {
            return{
                message:"hello world"
            }
        },
            beforeCreate()
            {
                console.log("befoeCreate");
            },   
            created()
            {
            console.log("created");
            },
        template: "<div>{{message}}</div>"
    });
    const t=app.mount('#root');
</script>

</html>

判断是否有template的存在

在代码走完created()周期函数之后，代码会考虑在之前的代码实例中是否存在template,如果存在则会把模板和数据进行结合，会把template后面的模板变成一个函数，在把数据和这个函数进行结合，才能把最终的内容给渲染出来。

beforeMount()

渲染出来之后，会执行下一个函数，为beforeMount().

<!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="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
const app= Vue.createApp({
        data() {
            return{
                message:"hello world"
            }
        },
            beforeCreate()
            {
                console.log("befoeCreate");
            },   
            created()
            {
            console.log("created");
            },
             beforeMount()
            {
                console.log("beforeMount");
            },
        template: "<div>{{message}}</div>"
    });
    const t=app.mount('#root');
</script>
</html>

mounted()

在模板变成函数与数据结合后会生成一个新的dom，用新的dom去替换掉上图id="root"的div标签。当把它替换后，页面就会呈现出自己想要的内容了。
此时会执行mounted()的执行函数。当mounted()执行完之后，页面中的hello world就展现出来了。
如：

<!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="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
const app= Vue.createApp({
        data() {
            return{
                message:"hello world"
            }
        },
            beforeCreate()
            {
                console.log("befoeCreate");
            },   
            created()
            {
            console.log("created");
            },
             beforeMount()
            {
                console.log("beforeMount");
            },
             beforeMount()
            {
                console.log("beforeMount");
            },
        template: "<div>{{message}}</div>"
    });
    const t=app.mount('#root');
</script>
</html>