黄江做网站全网营销公司排名前十
console 对象提供了浏览器控制台调试的接口（如：Firefox 的 Web console）。在不同浏览器上它的工作方式可能不一样，但通常都会提供一套共性的功能。———— MDN Web Docs console
前端开发工作中最常用到的方法应当就属于console.log了吧。但是我们开始先不说它，我们从console.trace方法开始。
console：trace() 静态方法
console 的 trace() 方法向 Web 控制台输出一个堆栈跟踪。我写这篇文章也是因为它，vue2项目搜索列表页由子组件搜索框页面，子组件列表页面以及他们的父组件页面组成。具体逻辑略但其中有个操作使changePage方法被调用了两次，这也导致了向后端请求两次数据。问题不大，但是这里多一次请求，哪里又多一次请求，无形中也会消耗很多的资源。既然发现了，那就小改一下吧。在changePage方法里输出console.trace('Child method called')
Child method called index.vue:194
changePage @ index.vue:194
secondItemChange @ index.vue:83
itemClick @ index.vue:155
click @ index.vue:243
Child method called index.vue:194
changePage @ index.vue:194
setFormParams @ index.vue:184
getSearch @ index.vue:74
search @ SearchBox.vue:157
initParameters @ SearchBox.vue:154
mounted @ SearchBox.vue:123
Promise.then
itemClick @ index.vue:144
click @ index.vue:243
以上输出可以很清楚的看出changePage方法分别由index.vue(父组件)页面的itemClick方法（点击的时候调用，测试时走这里是正确的）和SearchBox.vue(子组件)的initParameters方法（mounted生命周期调用，要找出的多余调用）调用，接下来的事情就简单多了（将initParameters方法从子组件的mounted移动到父组件的mounted，这里可以查看vue2 父子组件生命周期执行顺序，写在文章最后）。
console：table() 静态方法
console.table将数据以表格的形式显示。
这个方法需要一个必须参数 data，data 必须是一个数组或者是一个对象；还可以使用一个可选参数 columns。
它会把数据 data 以表格的形式打印出来。数组中的每一个元素（或对象中可枚举的属性）将会以行的形式显示在表格中。
表格的第一列是 index。如果数据 data 是一个数组，那么这一列的单元格的值就是数组的索引。如果数据是一个对象，那么它们的值就是各对象的属性名称。注意（在 FireFox 中）console.table 被限制为只显示 1000 行（第一行是被标记的索引（原文：labeled index））。
console.table(['apples', 'oranges', 'bananas'])
![console.table(['apples', 'oranges', 'bananas'])输出](https://i-blog.csdnimg.cn/direct/c7205a4b93b5467bbb274218a87b1498.png)
console.table([['John', 'Smith'],['Jane', 'Doe'],['Emily', 'Jones']
])
![console.table([['John', 'Smith'], ['Jane', 'Doe'],['Emily', 'Jones']])输出](https://i-blog.csdnimg.cn/direct/d13673b3939b4a188f4e4f731823cf79.png)
console.table(['apples', 'oranges', 'bananas'], ['name', 'age'])
![console.table(['apples', 'oranges', 'bananas'], ['name', 'age'])输出](https://i-blog.csdnimg.cn/direct/866747aa36b34d1da5189b9a9da903cb.png)
console.table({ name: 'John', age: 30, city: 'New York' })
console.table([{ name: 'John', age: 30, city: 'New York' },{ name: 'Anna', age: 22, city: 'London' },{ name: 'Mike', age: 32, city: 'Chicago' }],['name', 'age']
)
![console.table([{ name: 'John', age: 30, city: 'New York' },{ name: 'Anna', age: 22, city: 'London' },{ name: 'Mike', age: 32, city: 'Chicago' }],['name', 'age'])输出](https://i-blog.csdnimg.cn/direct/ddea3a278c434e30ba8171d45d933a14.png)
console：log() 静态方法
console.log() 方法向 Web 控制台输出一条信息。这条信息可能是单个字符串（包括可选的替代字符串），也可能是一个或多个对象。这个方法日常开发中用的可太普遍了，不再赘述。我们说下它输出带有颜色的文本好了。
输出单色的信息
console 能够解析占位符，总的就支持 5 个占位符 %o，%s，%d，%f，%c。
%c 指令将 CSS 样式应用于控制台输出，指令前的文本不会受到影响，但指令后的文本将使用参数中的 CSS 声明进行样式设置。
console.log('123%c456', 'color: red;')
输出：
输出多色的信息
console.log(`%c123%c456`, 'color: blue;', 'color: green;')
输出：
简单说一下占位符的用法
在 JavaScript 中，console.log 支持使用占位符来格式化输出内容，这使得输出信息更加清晰和易于阅读。以下是一些常见的占位符以及它们的用法：
常见占位符
%s：占位符代表一个字符串。%d或%i：占位符代表一个整数。%f：占位符代表一个浮点数。%o或%O：占位符代表一个对象，可以查看对象的结构。%c：占位符允许使用 CSS 样式来格式化输出内容。
示例代码
// 字符串占位符
console.log('Name: %s, Age: %d', 'John', 25);
//输出：Name: John, Age: 25// 整数占位符
console.log('The answer is %d.', 42);
//输出：The answer is 42.// 浮点数占位符
console.log('Pi: %f', 3.14159);
//输出：Pi: 3.14159// 对象占位符
console.log('User: %o', { name: 'Alice', age: 30 });
//输出：User: {name: 'Alice', age: 30}// 自定义样式占位符
console.log('%cCustom styled text', 'font-size: 20px; color: red; background: yellow;');
自定义样式占位符输出：
多个占位符
可以同时使用多个占位符，依次传递参数即可：
console.log('Name: %s, Age: %d, Score: %f', 'Jane', 28, 88.5);
// 输出：Name: Jane, Age: 28, Score: 88.5
注意事项
- 占位符的顺序必须与传递的参数顺序一致。
- 如果传递的参数类型与占位符类型不匹配，可能会导致意外的输出。
- 使用
%c时，第二个参数为 CSS 样式字符串，可以包含多个样式属性。
通过使用这些占位符，可以使控制台输出更加组织化和易于理解。
console：time() 静态方法
console.time() 方法是作为计算器的起始方法。
该方法一般用于测试程序执行的时长。
console.timeEnd() 方法为计算器的结束方法，并将执行时长显示在控制台。
如果一个页面有多个地方需要使用到计算器，可以添加标签参数来设置。
console.timeLog() 在控制台输出计时器的值，可以添加标签参数，如果没有传入 label 参数，则以 default: 作为引导返回数据，如果添加了label参数，会以 label: 作为引导返回数据。
console.time('Run')
for (let i = 0; i < 4; i++) {// 代码部分console.timeLog('Run')
}
console.timeEnd('Run')
//输出： Run: 0.0009765625 ms --timeLog输出
// Run: 0.072998046875 ms --timeLog输出
// Run: 0.14501953125 ms --timeLog输出
// Run: 0.217041015625 ms --timeLog输出
// Run: 0.287109375 ms --timeEnd输出
结束
console的方法还有很多，这里不一一介绍了，如果以后有用到的地方再行补充。
vue2 父子组件生命周期执行顺序
在 Vue 2 中，父子组件的生命周期执行顺序遵循一定的规则，这些规则决定了组件在初始化、更新和销毁时各个生命周期钩子的执行时机。以下是父子组件生命周期的执行顺序：
父子组件初始化时的生命周期顺序（从父到子）
- 父组件
beforeCreate：- 父组件开始初始化，此时组件实例刚刚创建，数据观测（data observer）和事件/挂载相关操作尚未初始化。
- 父组件
created：- 父组件实例已经创建完成，数据观测、事件/挂载相关操作已经初始化，但 DOM 还未生成。
- 父组件
beforeMount：- 父组件即将挂载，此时模板编译完成，但尚未渲染到页面上。
- 子组件
beforeCreate：- 子组件开始初始化，此时子组件实例刚刚创建，数据观测和事件/挂载相关操作尚未初始化。
- 子组件
created：- 子组件实例已经创建完成，数据观测、事件/挂载相关操作已经初始化。
- 子组件
beforeMount：- 子组件即将挂载，模板编译完成，但尚未渲染到页面上。
- 子组件
mounted：- 子组件挂载完成，DOM 已经渲染到页面上。
- 父组件
mounted：- 父组件挂载完成，此时子组件也已经挂载完成，父组件的 DOM 包含子组件的 DOM。
父子组件更新时的生命周期顺序（从子到父）
- 子组件
beforeUpdate：- 子组件即将更新，数据发生变化，但 DOM 尚未更新。
- 子组件
updated：- 子组件更新完成，DOM 已经更新。
- 父组件
beforeUpdate：- 父组件即将更新，数据发生变化，但 DOM 尚未更新。
- 父组件
updated：- 父组件更新完成，DOM 已经更新。
父子组件销毁时的生命周期顺序（从子到父）
- 子组件
beforeDestroy：- 子组件即将销毁，组件实例仍然存在，但即将被销毁。
- 子组件
destroyed：- 子组件销毁完成，组件实例已经被销毁，所有指令和事件监听器都被移除。
- 父组件
beforeDestroy：- 父组件即将销毁，组件实例仍然存在，但即将被销毁。
- 父组件
destroyed：- 父组件销毁完成，组件实例已经被销毁，所有指令和事件监听器都被移除。
总结
- 初始化顺序：父组件先于子组件初始化，子组件在父组件的挂载过程中完成自己的生命周期。
- 更新顺序：子组件先于父组件更新，因为子组件的更新会影响父组件的 DOM。
- 销毁顺序：子组件先于父组件销毁，确保子组件的所有资源在父组件销毁前已经被清理。
这种顺序设计是为了确保在组件树中，父组件可以控制子组件的初始化和销毁，同时在更新时子组件的更新先于父组件，以保证 DOM 的正确性。
参考
console
5分钟教你使用 console.log 输出五彩斑斓的黑
console.time()
kimi AI