vue生命周期

Posted harold-hua

tags:

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

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Vue实例生命周期函数</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            hello
        </div>
        <script type="text/javascript">
            // 生命周期函数就是vue实例在某一个时间点会自动执行的函数
            var vm = new Vue({
                el: ‘#app‘,
                template: "<div>{{test}}</div>",
                date: {
                    test: ‘hello‘
                },
                beforeCreate() {
                    console.log("beforeCreate")
                },
                created() {
                    console.log("created")
                },
                beforeMount() {
                    console.log("beforeMount")
                    console.log(this.$el)
                },
                mounted() {
                    console.log("mounted")
                    console.log(this.$el)
                },
                // 执行vm.$destroyed()后执行beforeDestroy()和destroyed()
                beforeDestroy() {
                    console.log("beforeDestroy")
                },
                destroyed() {
                    console.log("destroyed")
                },
                // 数据发生改变的时候执行beforeUpdate()和updated()
                beforeUpdate() {
                    console.log("beforeUpdate")
                },
                updated() {
                    console.log("update")
                }
            })
        </script>
    </body>

</html>

技术图片

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

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

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

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

Android 片段生命周期

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

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