对vue生命周期的理解

官网给出了如下图示:


image1.png

image2.png

由该图我们了解到vue的生命周期有8种,分别是 beforeCreate, created, beforeMount,mounted, beforeUpdate, updated,destroyed。所以我们创建一个简单的vue实例,在不同的生命周期下打印this.message,this.$el,观察dom渲染和挂载情况。

代码示例:

<!DOCTYPE html>
<html>
<head>
  <title>2333</title>
  <script type="text/javascript" src='../vue.js'></script>
  <script type="text/javascript">
    window.onload = function(){
     var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
            console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
            console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log('真实dom结构:' + document.getElementById('app').innerHTML);
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log('真实dom结构:' + document.getElementById('app').innerHTML);
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
            console.log("%c%s", "color:red","data   : " + this.$data); 
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
}
  </script>
</head>
<body>
  <div id="app">
    <input type="text" name="sss" v-model="message"/>
  {{message}}
  </div>
</body>
</html>

截图如下:


图1.1 html样式
图1.2 打印结果

当改变输入框的内容时:


图2.1 update变化前后

注意:关于this.message在update前后值相同的情况,我认为因为这个并不是监听前后的变化,而是你在修改前这个值,因为只要修改就会触发更新前和后,这个值已经改变了,所以拿到的都是改后的值。所以要监测前后变化还是应该尝试打印dom。

参考博文链接:https://segmentfault.com/q/1010000011521681

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。