VUE3细节踩坑记录

欢脱的小猴子

已于 2024-10-14 11:15:30 修改

阅读量333

点赞数 5

文章标签： vue.js javascript 前端

于 2024-09-09 16:04:48 首次发布

本文链接：https://blog.csdn.net/m0_50666077/article/details/142045661

版权

1. 数组去重（简单高效）

Array.from确保是数组类型

1. 单元素数组

let arr = [1,2,2,3,4]
let newArr = Array.from(new Set(arr))  //[1,2,3,4]

2. obj数组

根据map中的字段定义

let arr1 = [
	{
		id:1,
		type:'input'
	},
	{
		id:3,
		type:'output'
	}
]
let arr2 = [
	{
		id:1,
		type:'input'
	},
	{
		id:2,
		type:'input'
	}
]
//.values不能省略，否则无效
let newArr = Array.from(new Map([...arr1, ...arr2].map((item) => [item['id'], item])).values());
//newArr输出：去重合并
[
    {
        "id": 1,
        "type": "input"
    },
    {
        "id": 3,
        "type": "output"
    },
    {
        "id": 2,
        "type": "input"
    }
]

2. obj中动态添加字段

应用场景，有一些参数，如果有值才添加到obj中，如果没有值，则obj中不要这个字段。比如如果路由中有fildId，那么页面跳转的时候，路由中显示该参数，如果fileId没有值，就不要出现在路由中。
写法：...(route.params?.fileId && { fileId: route.params.fileId })
含义：使用短路逻辑 &&，如果 route.params?.fileId 为真，则返回一个包含 fileId 属性的新对象 { fileId: route.params?.fileId }。否则，返回 false。如果前面的表达式返回 false，则不会展开任何内容。

router.push({
      path: `/agent/pods/${row.workflowId}/vueFlow`,
      query: {
        name: row.name,
        appId: row.id,
        type: 'workflow',
        ...(route.params?.fileId && { fileId: route.params.fileId }),
      },
    })

3. el-form是多层obj，绑定rules

el-form的样式

{
	key: '',
    name: '',
    action: {
        value: '',
    },}

rules设置：深层次的action.value要直接指出，否则只写action的话，表单验证无效

const formRules = computed(() => {
  return {
    key: [{ required: true, message: '请输入字段名', trigger: 'blur' }],
    name: [{ required: true, message: '请输入中文名', trigger: 'blur' }],
    'action.value': [{ required: true, message: '请输入数据加工方式', trigger: 'blur' }],
  }
})

4. div的`disabled`效果

div设置动态class：设置pointer-events和opacity，适用于任何不可点击的场景。

//template部分
<div class="disabled-div"></div>

//style
.disabled-div {
  pointer-events: none;
  opacity: 0.5;
}

5. 导出二进制文件

1. 导出`json`文件

json自动缩进方式：JSON.stringify(saveData, null, 2)
需要下载file-saver插件

import FileSaver from 'file-saver' //下载json文件
const exportWorkFlowChat = () => {
  const saveData = transferData()
  let data = JSON.stringify(saveData, null, 2)  
  let blob = new Blob([data], { type: 'application/json' })
  FileSaver.saveAs(blob, `${podName.value}.json`)
}

2. 导出`xlsx`文件

  const exportXlsx= async () => {
  let res = await exportConnection()
  let blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  let url = window.URL.createObjectURL(blob);
  let link = document.createElement('a');
  link.href = url
  link.download = '关联关系列表.xlsx'
  link.click()
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}

6. 阻止外层的冒泡事件

应用场景：一个div上定义了点击事件，但是其内部还有按钮，定义了别的点击事件，在点击内部按钮时，只执行按钮本身的事件，不要指定外层div上的时间，就需要阻止外层冒泡。

 <el-card shadow="never"  @click="viewDetail">
  	<el-button @click.stop="handleCopy" :icon="CopyDocument"/>
    <el-button @click.stop="handleUpdate(item)" :icon="Edit"/>
 </el-card>

`el-select`：添加`@click.stop`生效

场景：el-select写在div内部，在下拉选择的时候，不想要触发外层事件，直接@click.stop同样生效。

<div class="service-wrapper" @click="clickNode">
    <el-select v-model="selectedAppId" placeholder="请选择事务名称" filterable clearable size="small"
       @change="changeApp" @click.stop>
       <el-option v-for="item in allAppOptions" :key="item.id" 
       :label="item.name" :value="item.id"/>
     </el-select>
</div>

在上面的代码中，点击handleCopy或handleUpdate的时候，就不再执行viewDetail，不会受到干扰了！

7. `z-index`有效设置：必须与`position`绑定

如果按钮的父元素没有设置 position: relative; 或 position: absolute;，可以尝试将按钮的 position 属性设置为 absolute。z-index必须与position绑定。

8. map、reduce、flatMap、some简单好用

多参考mdn文档

9. 检测字符串以xxx开头：`startWith`

let param = "right_end"
param.startsWith('right_')   //true

let flag = "right"
flag .startsWith('right_')   //false

10. 代码优化：`v-if、v-else-if、v-else`的使用情况

分情况讨论时，如果确定只有两种可能，可以用v-if、v-else，其他的最好都用v-if、v-else-if，避免情况拓展后，页面显示异常
v-if、v-if连用和v-if、v-else-if连用是不一样的，如果有else，说明是互斥的，只会走其中一种情况，如果全是if，那么两种情况都会走，不同情况下要加以区分使用，细节决定页面能否正确显示啊！！！！！！