前端语句注意事项

1.id?: number问号的含义

其代表的含义：用作类型注解的一部分，表示该属性是可选的（optional）。当你在一个接口的属性后面添加 ? 时，这意味着该属性在创建对象时不必提供，如果提供，它的值将符合后面指定的类型。

例如，考虑以下接口：

typescript

interface User { id?: number; name: string; }

在这个 User 接口中：

• id 属性是可选的，意味着在实现这个接口的对象中，可以不包含 id 属性，或者 id 属性可以是任何数字。
• name 属性是必需的，并且在创建对象时必须提供，它的值必须是字符串类型。

2. 改变组件的填充而不改变文字之间的距离

可以通过调整 padding 属性来为组件内容提供更多的内衬空间,

增加 el-card 的内衬： 通过设置 body-style 属性，为卡片内容增加内衬。

<el-card
  shadow="never"
  body-style="padding: 20px;"
>
  <!-- 卡片内容 -->
</el-card>

 3.前端循环读取数据

v-for="(item, index) in使用该语句来完成，in后面接入数组，使用对Index循环来读取数组里的数据，通过Item.xxx来完成数据调用，在组件上面调用数据，完成循环调用数据任务，

4.onMounted(()使用方法

onMounted 是 Vue 3 中的一个生命周期钩子，用于在组件挂载（mounted）完成后执行回调函数。这与 Vue 2 中的 mounted 生命周期钩子类似，但使用了 Composition API 的语法。

使用方法

在 Vue 3 的 Composition API 中，onMounted 通常与 setup 函数一起使用。setup 是 Vue 3 中引入的新功能，它是一个在组件创建之前执行的函数，用于初始化组件的状态和响应式数据。

1. 确保逻辑顺序： 使用 onMounted 时，确保需要在组件挂载后执行的逻辑放在 onMounted 的回调函数中。

2. onMounted 钩子只会在组件首次挂载时调用一次。如果您需要在组件更新时执行某些操作，请使用 onUpdated 钩子。

3. 由于 onMounted 在组件挂载完成后执行，此时可以确保 DOM 元素已经渲染完成，适合执行依赖于 DOM 的操作，如获取元素的尺寸或位置。

4. onMounted 常用于执行组件初始化时的网络请求，获取数据并设置组件状态。

5.reactive函数

在 Vue 3 中，reactive 是 Composition API 的一部分，用于创建响应式对象。这个函数接收一个普通对象作为参数，并返回该对象的响应式代理，使得 Vue 能够追踪对象属性的变化，并在它们变化时更新 DOM。

1. 不可变原对象：reactive 函数返回的对象是原对象的代理，原对象不会被直接修改。

2. 响应式属性：代理对象的所有属性都是响应式的，包括嵌套对象的属性。

3. 对于基础数据类型，推荐使用 ref 来创建响应式引用。reactive 更适合处理对象。

4. reactive 创建的响应式对象在组件卸载时会自动清理，无需手动销毁。

6.async函数

async 是 JavaScript 中的一个关键字，用于声明一个异步函数。异步函数是一种使用 async/await 语法的函数，它使得异步操作（如 I/O、网络请求等）可以以一种更同步、更易读的方式书写。

1.声明异步函数：使用 async 关键字声明一个函数，使其成为异步函数。 

2.使用 await：在异步函数内部，可以使用 await 关键字等待一个 Promise 的解决（resolve）或拒绝（reject）。

3.处理返回值：异步函数总是返回一个 Promise。如果从函数中返回一个值，该值会被包装在 resolved 的 Promise 中。如果抛出异常，该异常会被包装在 rejected 的 Promise 中。

7.注意使用ref的调用

下面需要使用组件.value去访问

8.forEach函数

forEach 是 JavaScript 中数组（Array）的一个方法，用于对数组中的每个元素执行一次提供的函数。这个方法返回 undefined，不返回新数组。

array.forEach(function callback(currentValue, index, array) {
  // 您的代码
}, thisArg);

• callback：一个在每个数组元素上执行的函数，它接受以下参数：
  • currentValue：当前遍历到的数组元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：正在遍历的数组。
• thisArg（可选）：执行 callback 函数时使用的 this 值。

9.find函数

find 是 JavaScript 数组的一个方法，用于找出数组中满足特定条件的第一个元素。它返回数组中满足提供的测试函数的第一个元素的值。如果没有找到符合条件的元素，则返回 undefined。

array.find(callback(currentValue, index, array), thisArg); 

• callback：用于测试数组中每个元素的函数。它接受以下参数：
  • currentValue：当前遍历到的数组元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：正在遍历的数组。
• thisArg（可选）：执行 callback 函数时使用的 this 值。

返回值：

• 如果找到了符合条件的元素，返回该元素的值。
• 如果没有找到符合条件的元素，返回 undefined。

10. map函数

map 是 JavaScript 数组的一个方法，用于创建一个新数组，其内容是原数组中的每个元素经过某种操作（如函数处理）后的值。map 方法返回一个新数组，不会修改原始数组。

array.map(function callback(currentValue, index, array) {
  // 返回新数组的元素值
}, thisArg);

• callback：数组中每个元素执行的函数，它接受以下参数：
  • currentValue：当前遍历到的数组元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：正在遍历的数组。
• thisArg（可选）：执行 callback 函数时使用的 this 值。

返回值：

• 返回一个新数组，数组中的元素为 callback 函数返回的值。