vue的生命周期

最新推荐文章于 2022-04-01 14:21:07 发布

置顶黑色咖啡 Ken

最新推荐文章于 2022-04-01 14:21:07 发布

阅读量164

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/a4561614/article/details/81032094

版权

Vue 专栏收录该内容

72 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>生命周期</title>
  </head>
  <body>
  <div class="app">
     {{a}}
     <input type="text" v-model="a"  name="" value="a">
  </div>
  </body>
  <script src="js/vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    //Vue的生命周期
    //它可以总共分为8个阶段：
    //beforeCreate（创建前）,
    //created（创建后）,
    //beforeMount(载入前),
    //mounted（载入后）,
    //beforeUpdate（更新前）,
    //updated（更新后）,
    //beforeDestroy（销毁前）,
    //destroyed（销毁后）
    //然后用一个实例的demo 来演示一下具体的效果：

    //created：异步数据的获取、初始化
    //mounted：挂载元素内dom节点的获取
    //nextTick：更新数据后立即操作dom
    //updated：任何数据的更新，如果要做统一的业务逻辑处理
    //watch：监听具体数据变化，并做相应的处理
    var vm=new Vue({
      el:'.app',
      data:{
        a:'vue值'
      },
      beforeCreate:function(){
        console.group('beforeCreate创建前状态===============》');
        console.log("a："+this.a); //a:undefined
        console.log(this.$el)      //undefined
      },
      created:function(){
        console.group('created创建后状态===============》');
        console.log("a："+this.a); //a:vue值
        console.log(this.$el)     //undefined
      },
      beforeMount:function(){//钩子函数间的生命周期
        console.group('beforeMount挂载前状态===============》');
        console.log("a："+this.a); //a:vue值
        console.log(this.$el)      //<div class="app">{{a}} <input type="text" v-model="a" name="" value="a"></div>
      },
      mounted:function(){//钩子函数间的生命周期
        console.group('mounted挂载结束状态===============》');
        console.log("a："+this.a);//a:vue值
        console.log(this.$el)     //<div class="app"> vue值 <input type="text"  value="a"></div>
      },
      beforeUpdate:function(){//钩子函数间的生命周期
        console.group('beforeUpdate更新前状态===============》');
        console.log("a："+this.a);//a:vue值2
        console.log(this.$el)     //<div class="app"> vue值2 <input type="text"  value="a"></div>
      },
      updated:function(){//钩子函数间的生命周期
        console.group('updated更新后状态===============》');
        console.log("a："+this.a); //a:vue值2
        console.log(this.$el)     //<div class="app"> vue值2 <input type="text"  value="a"></div>
      },
      beforeDestroy:function(){//钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
        console.group('beforeDestroy销毁前状态===============》');
        console.log("a："+this.a);
        console.log(this.$el)
      },
      destroyed:function(){//钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
                            //所有的事件监听器会被移除，所有的子实例也会被销毁。
        console.group('destroyed销毁后状态===============》');
        console.log("a："+this.a);
        console.log(this.$el)
      }
    });
  </script>
</html>

黑色咖啡 Ken

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue的生命周期

&lt;!DOCTYPE html&gt;&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;生命周期&lt;/title&gt; &lt;/head&gt; &lt;body&
复制链接

扫一扫