面试题：Vue项目中如何使用console进行基础的日志记录

Question

在Vue项目里，阐述使用console进行日志记录的常见方法，比如在组件生命周期钩子函数中记录组件的创建和销毁信息，以及如何区分不同级别的日志（如普通信息、警告、错误）。

Answer 1

1. 在组件生命周期钩子函数中记录组件的创建和销毁信息

在Vue组件中，可以使用created和destroyed生命周期钩子函数结合console进行记录。

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  created() {
    console.log('组件已创建');
  },
  destroyed() {
    console.log('组件已销毁');
  }
}
</script>

2. 区分不同级别的日志

• 普通信息：使用console.log，它用于输出一般性的信息，方便在调试过程中查看变量值、流程执行情况等。

let message = '这是一条普通信息';
console.log(message);

• 警告：使用console.warn，当出现一些可能影响功能但不会导致程序崩溃的情况时使用。它在控制台中会以黄色警告图标和特殊样式显示。

let condition = false;
if (!condition) {
  console.warn('条件不满足，可能存在问题');
}

• 错误：使用console.error，当程序发生错误，如运行时错误、逻辑错误等，导致功能无法正常执行时使用。它在控制台中会以红色错误图标和特殊样式显示，便于开发者快速定位问题。

try {
  let result = 1 / 0; // 这会引发除零错误
} catch (error) {
  console.error('发生错误:', error);
}