Vue 生命周期

最新推荐文章于 2025-03-06 15:18:14 发布

熊熊很酷

最新推荐文章于 2025-03-06 15:18:14 发布

阅读量163

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_56350749/article/details/126074003

版权

笔记专栏收录该内容

28 篇文章

订阅专栏

Vue生命周期

生命周期又名生命周期回调函数, 生命周期函数, 生命周期钩子
是什么: Vue 在关键时刻帮我们调用的一下特殊名称函数
生命周期函数的名字不可改变, 但函数的具体内容是程序员根据需求编写
生命周期函数中的 this 指向 vm 或组件实例对象

图解(重要)

在这里插入图片描述

代码示例

<body>
    <div id="root" x="2">
        <h1>{{n}}</h1>
        <button @click="add_ticket">加一</button>
        <button @click="buy">销毁vm</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script type="text/javascript">

        var vm = new Vue({
            el: "#root",
            data: {
                n: 1
            },
            methods: {
                add_ticket(){
                    console.log("add")
                    this.n++
                },
                buy(){
                    console.log("buy调用")
                    this.$destroy();
                }
            },

            beforeCreate(){
                console.log("beforeCreate调用")
                console.log(this.n)
                console.log(this)
            },
            created(){
                console.log("creaate调用")
                console.log(this.n)
            },
            beforeMount() {
                console.log("beforeMount调用")
                console.log(this.n)
            },
            mounted(){
                console.log("mounted调用")
                console.log(this.n)
            },
            beforeUpdate(){
                console.log("beforeUpdate调用")
                console.log(this.n)
            },
            updated(){
                console.log("updated调用")
                console.log(this.n)
            },
            beforeDestroy(){
                console.log("beforeDestroy调用")
                console.log(this.n)
            },
            destroyed(){
                console.log("destroyed调用")
                console.log(this.n)
                console.log(this)
            }
        });

    </script>
</body>