vue进阶/生命周期/console.log折叠项的lazy

1.console.log折叠项的lazy

小例子：

 beforeUpdate - updated 的区别

可以把 console.log(this.$el) 改成 => console.log(this.$el.innerHTML)
把 console.log 折叠项干掉
就能打印出区别了

详情分析：

由于console.log打印对象 会根据对象引用地址保存下来  //  所以当点开倒三角 查看对象详细信息，会到内存中拿最新的数据

//解决方案  打印详细信息  使用JSON,stringgify(obj)

 let dom = document.querySelector("h1").textContent;
        console.log('update', dom)
        alert(dom)

2.console.log会导致内存泄漏

浏览器默认打开开发者工具.默认开启了‘开发人员之后要查看这个对象行为’

所以导致了console。log引入的对象不进入GC垃圾回收逻辑中

解决方案：分离开发环境和生产环境

2 项目打包时候  eslint中  no-console打开

3.VUE生命周期

$el只有再mounted的时候才会挂载。beforeMount阶段模板中的数据是虚拟DOM   mounted阶段才是真正的DOM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    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("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      //此处拿的是一个对象 不是具体值  会储存地址  拿的时候就是最新的
      console.log(this.$el.innerHTML)
      let dom = document.querySelector("h1").textContent;
        console.log('before', dom)
        alert(dom) 
      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("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);
       //此处拿的是一个对象 不是具体值  会储存地址  拿的时候就是最新的
       console.log(this.$el.innerHTML)
      let dom = document.querySelector("h1").textContent;
        console.log('update', dom)
        alert(dom) 
      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>
</html>

 

posted @ 2020-05-07 13:23  容忍君  阅读(656)  评论(0)    收藏  举报