vue的生命周期

Posted xshan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的生命周期相关的知识，希望对你有一定的参考价值。

 　　生命周期函数代表的是`vue`实例、`vue`组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段、运行阶段及销毁阶段的函数。这些阶段的函数都是和methods同级的，不是写在methods中。

    创建期间的函数：

    　　1）beforeCreate：在创建实例前所执行的函数；Vue已经创建，但是data和methods都还没有创建好；
   　　 2）created：创建实例后所执行的函数；data和methods已经创建好，可以进行操作了。
    　　3）beforeMount：模版经过编译，还没有加载到网页中。
   　　 4）mounted：模版经过编译，且加载到网页中。

    运行阶段的函数：

    　　1）beforeUpdate：在数据更新但是页面还有更新前所执行的函数；
    　　2）update：在数据更新且页面的数据也更新后执行的函数。

    销毁阶段的函数：

    　　1）beforeDestroy：Vue实例或者是组件在被销毁之前执行的函数，在这个函数中Vue或者组件中的所有属性都是可以使用的。
    　　2）destroyed：Vue实例或者组件被销毁后执行的。此时，Vue实例或者是组件上的所有东西都会解绑，所有事件都会移除，所有子元素都会被销毁。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue生命周期</title>
</head>

<body>
    <div id="app">
        <p id="user">{{user}}</p>
        <input type="text" v-model=user>
        学习销毁阶段
        <hr>{{message}}
        <error-view :message="message" v-if="message"></error-view>
        <button @click="message=‘‘">清除message</button>
    </div>
    <script>
        // 用于学习销毁阶段的函数
        Vue.component("error-view", {
            props: ["message"],
            template: `
            <p style="color:red">{{message}}ces</p>
            `,
            data() {
                return {
                    hello: "你好"
                }
            },
            beforeDestroy() {
                console.log("==========");
                console.log("beforeDestory");
                console.log(this.hello);
            },
            destroyed() {
                console.log("==========");
                console.log("destroyed");
                console.log(this.hello);
            }
        })
        new Vue({
            el: "#app",
            data: {
                user: "知了",
                message: "错误信息"
            },
            methods: {
                greet() {
                    alert("hello word")
                },
            },
            beforeCreate() {
                console.log("-----------");
                console.log("beforeCreate");
                console.log(this.user);
                console.log(this.greet);
            },
            created() {
                console.log("-----------")
                console.log("created")
                console.log(this.user)
                console.log(this.greet)
            },
            beforeMount() {
                console.log("------------")
                console.log("beforeMount")
                console.log(document.getElementById("user").innerText);
            },
            mounted() {
                console.log("-----------")
                console.log("mounted")
                console.log(document.getElementById("user").innerText);
            },
            beforeUpdate() {
                console.log("============")
                console.log("beforeUpdate")
                console.log(this.user)
                console.log(document.getElementById("user").innerText);
            },
            updated() {
                console.log("==============")
                console.log("update")
                console.log(this.user)
                console.log(document.getElementById("user").innerText)
            }
        })
    </script>
</body>

</html>

 

以上是关于vue的生命周期的主要内容，如果未能解决你的问题，请参考以下文章

在不存在的片段上调用片段生命周期和 onCreate 的问题

Android片段生命周期：onResume调用了两次

导航上的片段生命周期重叠

Android 片段生命周期

关于片段生命周期，何时调用片段的 onActivityResult？

理解片段事务期间片段的生命周期方法调用