vue生命周期详解

最新推荐文章于 2025-06-17 02:16:28 发布

初心-LIUSHOP

最新推荐文章于 2025-06-17 02:16:28 发布

阅读量331

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 随手笔记文章标签： vue生命周期

本文链接：https://blog.csdn.net/qq_42817227/article/details/82853365

随手笔记同时被 2 个专栏收录

46 篇文章

订阅专栏

vue

25 篇文章

订阅专栏

初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416

先上图:
在这里插入图片描述

下面我们用实例来理解生命周期：

<div class="test" style="border: 1px black dashed;padding: 8px;">
            <p>{{demo}}</p>
            <button v-on:click="change">点击改变a值</button>            
        </div>
        <button>销毁Vue实例在控制台输入vm.$destory()</button>
        <script type="text/javascript">
            var vm = new Vue({
                el: ".test",
                data: {
                    demo: "绑定myValue.a的值"
                },
                methods:{
                  change:function(){
                    this.demo="这是改变后的";
                  },
                  destory1:function(){
                     this.$destory();
                  }
                },
               beforeCreate:function(){
                    console.log("组件实例刚被创建，组件属性计算之前");
               },
               created:function(){
                    console.log("组件实例创建完成，属性已绑定，但DOM未生成，$el属性还不存在。 ");
               },
               beforeMount:function(){
                    console.log("模板编译/挂载之前");
               },
               mounted :function(){
                    console.log(" 模板编译/挂载之后    ");
               },
               beforeUpdate: function(){
                    console.log("组件更新之前  ");
               },
               updated:function(){
                    console.log("组件更新之后  ");
               },
               beforeDestroy:function(){
                    console.log("组件销毁之前  ");
               },
               destroyed:function(){
                    console.log("组件销毁之后");
               }
        });
        </script>

文章到此结束，希望对你的学习有帮助！