vue2.0——生命周期

最新推荐文章于 2025-05-19 23:55:11 发布

阁下长得好生俊俏

最新推荐文章于 2025-05-19 23:55:11 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/H1069495874/article/details/64904830

Vue 专栏收录该内容

35 篇文章

订阅专栏

本文详细探讨了Vue 2.0组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed等各个阶段，以及在这些阶段中如何进行数据绑定、事件监听和资源释放。通过理解组件的生命周期，可以更好地优化Vue应用的性能和逻辑组织。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/Vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'welcome Vue2.0'
                },
                beforeCreate(){
                    console.log('组件实例刚刚被创建');
                },
                created(){
                    console.log('实例已经创建完成');
                },
                beforeMount(){
                    console.log('模板编辑之前');
                },
                mounted(){
                    console.log('模板编辑完成');
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    {{msg}}
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/Vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                    msg:'welcome Vue2.0'
                },
                methods:{
                    updata(){
                        this.msg='vue2.0的变化'
                    },
                    destory(){
                        this.$destroy();
                    }
                },
                beforeCreate(){
                    console.log('组件实例刚刚被创建');
                },
                created(){
                    console.log('实例已经创建完成');
                },
                beforeMount(){
                    console.log('模板编辑之前');
                },
                mounted(){
                    console.log('模板编辑完成');
                },
                beforeUpdate(){
                    console.log('组件更新之前');
                },
                updated(){
                    console.log('组件更新完成');
                },
                beforeDestroy(){
                    console.log('组件销毁之前');
                },
                destroyed(){
                    console.log('组件销毁完成');
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <input type="button" @click="updata" value="更新数据">
    <br>
    {{msg}}
    <br>
    <input type="button" @click="destory" value="销毁组件">
</div>
</body>
</html>