WEB前端：vuejs全家桶（14）：生命周期

最新推荐文章于 2024-10-25 14:14:39 发布

原创最新推荐文章于 2024-10-25 14:14:39 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vuejs

vuejs 专栏收录该内容

40 篇文章

订阅专栏

本文深入解析Vue.js中实例从创建到销毁的八个生命周期阶段，通过示例代码演示了每个阶段的作用和触发时机，帮助读者理解Vue组件的运行机制。

vue实例从创建到销毁的过程，称为生命周期，共有八个阶段

文档
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>发送AJAX请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <script>
        window.onload = function() {
            let vm = new Vue({
                el: '.itany',
                data: {
                    msg: 'welcome to itany'
                },
                methods: {
                    update() {
                        this.msg = '欢迎来到南京网博！';
                    },
                    destroy() {
                        vm.$destroy();
                    }

                },
                beforeCreate() {
                    alert('组件实例刚刚创建，还未进行数据观测和事件配置');
                },
                created() { //常用！！！
                    alert('实例已经创建完成，并且已经进行数据观测和事件配置');

                },
                beforeMount() {
                    alert('模板编译之前，还没挂载');
                },
                mounted() { //常用！！！
                    alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
                },
                beforeUpdate() {
                    alert('组件更新之前');
                },
                updated() {
                    alert('组件更新之后');
                },
                beforeDestroy() {
                    alert('组件销魂之前');
                },
                destroyed() {
                    alert('组件销魂之后');
                },
            });
        }
    </script>

</head>

<body>
    <div class="itany">
        {{msg}}
        <br>
        <button @click='update'>更新数据</button>
        <button @click='destroy'>销魂组件</button>

    </div>
</body>

</html>