自行回顾所用
setTimeout()
setTimeout()是一个 JavaScript 函数，它用于在特定的时间后执行一段代码。这个函数需要两个参数：一个是要执行的函数，另一个是延迟的毫秒数setTimeout(() => { ... }, delay)中的delay是延迟的毫秒数，表示在多少毫秒后执行传入的函数。例如，如果你设置delay为 1000，那么在 1 秒后，会执行你传入的函数- 而你提到的
setTimeout(() => { ... })，这种形式没有设置延迟时间，意味着立即执行传入的函数。如果函数内有任何改变网页状态的操作（如改变DOM），那么这些操作将在调用setTimeout()后立即执行 - 总的来说，主要的区别在于何时执行传入的函数：如果你希望在一段时间后执行，那么你需要设置一个延迟时间；如果你希望立即执行，那么你可以不设置延迟时间（那可能就会和不写没区别了）
nextTick()
nextTick()是 Vue.js 中的一个函数，它用于将回调函数推迟到下一次事件循环迭代。这意味着你可以在下一轮事件循环开始时执行回调函数- 在
nextTick()中，当你在事件处理函数或者生命周期钩子中执行异步操作（例如网络请求或者 setTimeout），并且你希望在 DOM 更新完成后再执行某些操作时就会派上用场
- 在
- 当使用
nextTick()时，你的回调函数会等待 DOM 更新完成后再执行。这可以确保你在 DOM 更新后访问到的数据是最新的 - 如果不使用
nextTick()，你的回调函数可能会在你期望的 DOM 更新之前就执行，这样可能会获取到旧的、不准确的数据 - 所以，
nextTick()可以确保你的代码在正确的时机执行，避免因为 DOM 还未更新完成而导致的错误
asyc + await
const saveGoods = async () => {
const valid = await demoGoodsFormRef.value.validate();
if (valid) {
const data = {
goodsName: addGoodsForm.goodsName,
goodsBrand: addGoodsForm.goodsBrand,
goodsStock: addGoodsForm.goodsStock,
// ......
}
if (xxx) {
// ......
} else {
demoXxxApi.updateXxx({
goodsId: addGoodsForm.goodsId,
...data
}, function (res) {
ElMessage.success('保存成功');
dialogFormVisible.value = false;
});
}
}
};
- 在这个函数中，
await demoXxxFormRef.value.validate()表示等待demoXxxFormRef.value.validate()这个异步操作完，而demoXxxFormRef.value.validate()是一个返回 Promise 的异步验证操作，用于验证表单的有效 - 使用
await的主要作用是等待异步操作的结果。如果表单验证通过（valid为true），则执行后续的逻辑，否则直接返回 - 在这里，
await的作用是确保在获取到表单验证结果之后再执行后续的逻辑，而不会因为异步操作而导致逻辑的交叉执行或不确定性 - 如果没有使用
async和await，而是直接调用demoGoodsFormRef.value.validate()，那么验证操作可能会是异步的，此时就无法准确地得知验证的结果。因此，使用async和await可以更清晰地编写异步流程，并在异步操作完成后进行后续的处理
三个点 ...
-
还是上述的代码，
...data是使用扩展操作符将data对象中的所有属性扩展到demoXxxApi.updateXxx的参数中，即将对象中的属性展开，以便将它们合并到新的对象中- 这样做的作用是可以将
data对象中的所有属性传递给updateGoods函数，而无需手动指定每个属性
- 这样做的作用是可以将
-
与不使用扩展操作符相比，使用扩展操作符可以使代码更简洁，并避免遗漏或错误地传递某些参数。通过使用扩展操作符，您可以确保将所有相关的数据传递给
updateXxx函数，以便正确地更新信息
两个感叹号
- 代码：
if (!!row) { ...... } !!row是一个将row进行双括号转换的表达式，它会把row转换为布尔值。- 具体来说，如果
row为空（null、undefined、空字符串""、0、NaN），那么!!row的结果是false；如果row是非空（即任何非空值），那么!!row的结果是true - 这个操作通常用于检查一个变量是否被定义或赋值，或者用于进行类型转换。在某些编程场景下，使用
!!row可以确保row是非空对象或非空值- 这样的操作在代码中经常被用来确保变量有意义，而不是被赋予了一个假值
const
const {goodsCategory} = addGoodsForm- 它是 JavaScript 中的对象解构语法。在这个上下文中，它被用来从
addGoodsForm对象中提取goodsCategory属性。这个语法是一个简写，将goodsCategory属性的值赋给同名变量 const { goodsCategory } = addGoodsForm;这行代码等同于：const goodsCategory = addGoodsForm.goodsCategory;
findIndex(item => {})
- 在
const index = categoryTreeList.value.findIndex(item => { return item.dictValue === goodsCategory })中：findIndex方法是数组的一个方法，用于找到数组中第一个满足提供的测试函数条件的元素的索引item：表示数组在迭代期间的每个元素- 上述代码的
findIndex方法返回满足条件的第一个元素的索引，如果没有找到元素，则返回 -1
map((item) => {}）
- 在
res.data.map((item) => { return { label: item.xxxName, value: item.xxxCode }; })中 map方法也是 JavaScript 中数组的一个方法，用于通过将提供的函数应用于数组的每个元素来创建一个新数组，在这里，就是用来将res.data数组中的每个元素转换为一个具有label和value属性的新对象- 因为有的 element 标签是需要
map方法返回的是包含转换后对象的新数组- 这里
item加不加括号一样用，因为就这一个