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>