Vue生命周期钩子

最新推荐文章于 2025-03-24 08:56:25 发布

原创最新推荐文章于 2025-03-24 08:56:25 发布 · 211 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #前端框架 #vue.js

本文深入探讨了Vue.js实例的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等钩子函数。通过示例代码展示了在不同生命周期阶段执行的操作，如事件绑定和DOM操作。了解这些生命周期有助于更好地控制和管理Vue应用的状态和行为。

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

<body>
    <div id="app">
            <p>{{msg}}</p>
            <div>
                <input type="button" value="更新" @click="change">
                <input type="button" value="销毁" @click="destory">
                <input type="button" value="点点看" id="btn">
            </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                msg:"实例消息"
            }
        },
        // 钩子函数(生命周期函数)
        // 1.创建之前
        beforeCreate() {
            alert("创建实例之前")
        },
        // 2.创建之后
        created() {
            alert("创建实例完成")
            // 创建完成但没有挂载，猜猜可以出来吗(出不来)
            let btn = document.querySelector("#btn");
            btn.onclick = function(){
                alert("111哈哈出来了")
            }

        },
        // 3.挂载之前
        beforeMount() {
            alert("实例挂载前")
        },
        // 4.挂载之后
        mounted() {
            alert("实例挂载完成")
            let btn = document.querySelector("#btn");
            // 挂载之后才可以出来
            btn.onclick = function(){
                alert("666哈哈出来了")
            }

        },
        // 5.更新之前
        beforeUpdate() {
            alert("更新前")
        },
        // 6.更新之后
        updated() {
            alert("更新后")
        },
        // 7.销毁之前
        beforeDestroy() {
            alert("销毁前");
        },
        // 8.销毁之后
        destroyed() {
            alert("销毁完成")
        },
        methods: {
            change(){
                this.msg = "更新成功";
            },
            destory(){
                this.$destroy();
            }
        },
    })
</script>