在工作中踩坑经历汇总

Vue框架

1. 关于定义的常量

• 如果在文件中引入js常量文件，在模板引擎中要使用到这些常量，需要同时在data()中定义这些常量

<template>
    <span>{{KeyMap.KEY_NAME}}</span>
</template>
    import {KeyMap} from 'global-constant.js'
    export default {
        // ...
        data() {
            return {
                 KeyMap,
            }
        },
        // ...
    }

2. 关于watch中的immediate和deep区别
3. 路由中的beforeRouteEnter和create区别
4. 如何解决组件没有响应更新
   • 使用key来进行组件更新
   • key的原理
   • 如何进行更新
5. watch如何监听路由或者除了data中的数据
6. 路由的params和query区别？如何使用？
7. 使用computed作为组件props的值如何同步组件修改computed依赖的值？
8. 响应式数据浅拷贝带来的问题？如何定义响应式属性？
9. VueX使用模块化，如何引出模块的actions或者其他方法？

组件库

1. Element-UI中的el-popover组件，如果组件不随着绑定元素滚动如何解决？
   • 组件自带有update的方法，可以使用nextTick方法回调update方法进行刷新
   • 需要进行节流操作
2. Element-UI中的表格，合并的方法如何使用，如何实现自定义多行合并？

JavaScript

1. 关于对象中'[ ]'和'.'引出属性的区别

• 使用'[ ]'一般是内部是字符串可以引出，一般配合

// 通过keys
Object.keys(Obj).map(key => KeyMap[key])
// 通过提前定义的keyList
keyList.map(key => Obj[key])
// 通过当前字符
Obj[key]
// 结论：
只要是要通过字符类型的key引出的属性值都需要通过'[  ]'引出

• 使用'.'是点出变量名，无法配合字符型key点属性出值，只有确定的属性名字才可以点

2. Array数组的方法有哪些？分别有什么用处，适用于什么场景？
   • 我在工作中经常使用的是forEach、map、reduce、filter、some、includes、slice、splice、join、every、push、unshift、shift、pop、find、findIndex、sort
   • forEach一般用于循环数组每一项数据，map返回数组或者数组对象【一般在重构自己需要的表格数据结构需要用到】reduce和map差不多，不过比map更加灵活，它可以生成对象，自定义key-value。filter一般用于过滤某些指定条件，隐藏它，在表格中经常是在筛选某种要的条件。some和every相反，是判断有无某个值或者所有值。

Html和CSS

1. 巨坑！！关于user-select: none属性
   • 前段时间在做快捷键ctrl+v实现粘贴的效果。在CSS属性中使用了user-select:none导致出现了监听器无法监听到我执行了粘贴事件。
2. flex布局的justify-self失效
3. 为何不要使用rem定义大小，而是通过px和flexible.js进行px转化为rem?
4. 选择器使用

。。。。。。。。更新中