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 中引入的新功能,它是一个在组件创建之前执行的函数,用于初始化组件的状态和响应式数据。
-
确保逻辑顺序: 使用
onMounted
时,确保需要在组件挂载后执行的逻辑放在onMounted
的回调函数中。 -
onMounted
钩子只会在组件首次挂载时调用一次。如果您需要在组件更新时执行某些操作,请使用onUpdated
钩子。 -
由于
onMounted
在组件挂载完成后执行,此时可以确保 DOM 元素已经渲染完成,适合执行依赖于 DOM 的操作,如获取元素的尺寸或位置。 -
onMounted
常用于执行组件初始化时的网络请求,获取数据并设置组件状态。
5.reactive函数
在 Vue 3 中,reactive
是 Composition API 的一部分,用于创建响应式对象。这个函数接收一个普通对象作为参数,并返回该对象的响应式代理,使得 Vue 能够追踪对象属性的变化,并在它们变化时更新 DOM。
-
不可变原对象:
reactive
函数返回的对象是原对象的代理,原对象不会被直接修改。 -
响应式属性:代理对象的所有属性都是响应式的,包括嵌套对象的属性。
-
对于基础数据类型,推荐使用
ref
来创建响应式引用。reactive
更适合处理对象。 -
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
函数返回的值。