109. 面试官：Node如何进行性能监控和优化？-CSDN博客

本文链接：https://blog.csdn.net/qq_30811721/article/details/134046828

109期

1. Node如何进行性能监控和优化？

2. Node应用如何确保服务的安全？

3. css3实现动画有哪些方式，请举例？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

也可以小程序刷题，已收录500+面试题及答案

108期问题及答案

1. vue中将方法通过props传递和使用@event传递有什么区别，适用什么场景

在Vue中，你可以通过props和$emit来实现父子组件之间的通信，其中props主要用于从父组件向子组件传递数据和方法，而$emit用于从子组件向父组件传递事件。下面我将解释这两种方式的区别以及适用场景：

通过`props`传递方法

区别：

通过props传递方法是将一个方法从父组件传递给子组件，使子组件可以调用该方法。
这种方式是单向传递的，只允许子组件调用父组件传递的方法，而不允许父组件直接调用子组件的方法。
适用于将一些通用的方法传递给子组件，以便子组件可以根据需要触发这些方法。

适用场景：

传递回调函数：例如，当子组件中发生某个事件时，需要通知父组件执行特定的操作。
自定义表单控件：当你需要创建一个自定义的表单控件，可以通过props传递v-model绑定的值以及更新方法。

示例：

父组件中：

<template>
  <child-component :onChildEvent="handleChildEvent" />
</template>
<script>
export default {
  methods: {
    handleChildEvent() {
      // 这个方法可以在子组件触发时执行
    }
  }
}
</script>

子组件中：

<template>
  <button @click="triggerEvent">触发事件</button>
</template>
<script>
export default {
  props: ['onChildEvent'],
  methods: {
    triggerEvent() {
      // 子组件触发事件，调用父组件传递的方法
      this.onChildEvent();
    }
  }
}
</script>

通过`$emit`传递事件

区别：

通过$emit传递事件是从子组件向父组件传递消息或事件，父组件通过监听这些事件来执行相应的操作。
这种方式是子组件通知父组件发生了某事件的途径，适合实现子组件与父组件的双向通信。

适用场景：

子组件发出的自定义事件：当子组件需要通知父组件某个特定事件已发生，例如，点击按钮、提交表单等。
跨组件通信：当需要在非父子关系的组件之间传递事件或数据时。

示例：

子组件中：

<template>
  <button @click="triggerEvent">触发事件</button>
</template>
<script>
export default {
  methods: {
    triggerEvent() {
      // 子组件触发事件，通知父组件
      this.$emit('child-event');
    }
  }
}
</script>

父组件中：

<template>
  <child-component @child-event="handleChildEvent" />
</template>
<script>
export default {
  methods: {
    handleChildEvent() {
      // 父组件监听子组件的事件
    }
  }
}
</script>

总之，使用props传递方法适用于从父组件向子组件传递方法，而使用$emit传递事件适用于子组件向父组件传递消息或事件。选择哪种方式取决于你的具体需求和组件之间的通信关系。

2. TS中的模块是什么？有什么应用场景

在 TypeScript（TS）中，模块（Module）是一种用于组织和封装代码的结构，使你可以将相关的代码块分离开，以提高代码的可维护性和可重用性。TS支持多种模块系统，其中最常见的是CommonJS和ES6模块系统。以下是模块的一些关键概念和应用场景：

模块的关键概念：

导出（Export）：模块可以导出变量、函数、类等，以便其他模块可以访问这些导出项。
导入（Import）：模块可以导入其他模块导出的项，以在当前模块中使用它们。
模块文件：每个模块通常对应一个文件，其中包含了相关的代码和导出项。

应用场景：

模块化开发：模块允许你将代码分成小块，每个块负责特定功能，这有助于降低代码复杂度，提高可维护性。你可以将不同的功能封装在不同的模块中。
代码重用：模块允许你将通用的代码块封装为模块，然后在多个地方导入和使用。这有助于减少代码的冗余，提高开发效率。
依赖管理：使用模块系统可以有效管理代码之间的依赖关系。你可以清晰地声明一个模块需要导入哪些其他模块，使得项目的结构更加清晰。
命名空间隔离：模块系统允许你在不同模块中定义同名的变量或函数，而它们不会互相干扰，因为模块内部具有自己的作用域。
异步加载：模块系统支持按需加载，这意味着你可以在需要的时候动态加载模块，从而减小初始加载的资源体积，提高性能。

示例（使用ES6模块）：

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from './math';
console.log(add(2, 3)); // 调用 math 模块中的 add 函数

在这个示例中，math.ts 模块导出了一个函数 add，而 app.ts 模块通过 import 语句导入了 add 函数。这种模块化的方式使你可以将代码拆分成小块，并在需要时按需导入，提高了代码的可维护性和可重用性。

3. 什么是JSX，和JS有啥区别？

JSX（JavaScript XML）是一种 JavaScript 的扩展语法，最初由React引入，用于在JavaScript中声明用户界面的结构。JSX允许你像XML或HTML一样编写结构化的代码，以创建React组件。虽然JSX看起来像HTML，但它实际上是JavaScript的一部分，需要经过编译后才能在浏览器中运行。

以下是JSX的特点和与普通JavaScript的区别：

结构化表达：JSX允许你以一种更结构化、更声明性的方式来描述用户界面。你可以使用类似HTML的标记，组织和呈现组件的结构。
嵌套元素：JSX支持嵌套元素，就像HTML一样。这使得构建复杂的UI组件更容易。
组件渲染：JSX元素可以代表React组件，你可以在JSX中使用自定义组件，使UI的构建更具层次结构。
表达式插值：你可以在JSX中嵌入JavaScript表达式，使用 {} 括起来。这允许你动态计算元素的属性或内容。
自定义属性：你可以为JSX元素添加自定义属性，这些属性可以在组件内部访问。这有助于将数据传递给组件。
事件处理：JSX支持事件处理，你可以在元素上添加事件处理程序，以响应用户的交互。
编译转换：JSX不是浏览器直接支持的语法，它需要通过工具（如Babel）将JSX代码转换为普通的JavaScript代码，以便在浏览器中执行。
类型检查：由于JSX是JavaScript的一部分，你可以使用TypeScript等静态类型检查工具对JSX进行类型检查，以提高代码的可维护性和安全性。

示例：

以下是一个简单的JSX示例，用于创建一个React组件：

const element = <h1>Hello, JSX!</h1>;

function App() {
  return (
    <div>
      {element}
    </div>
  );
}

在这个示例中，JSX用于创建element，并将其包含在React组件App中。这种声明性的方式使得创建和呈现UI变得更直观和易于理解。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。