vue项目一些常见问题

**样式污染问题**

复制组件的时候，不要复制样式。
最好在最外层包裹一个class，作为这个组件专用的样式，要不如果有更改就会影响到其他组件的样式。
或者加scope，也是改组件专用，构建后会自动加一串代码。比如：.btnbiv [data-32522112412]{……}
否则只有style的样式，就是全局样式了，如果class名称一样，会相互影响的，后引入的样式会覆盖掉先引入的样式。
多处都用的样式，放在common.css中。

一些报错问题

**key值重复问题**

如果给模板中的元素设置key，需要设置成唯一的key。重复的 key 会造成渲染错误。
如果:key="index"会重复的话，加一些符号，比如其他字段，组合在一起保证key值唯一。

有一些table显示问题，也是可以通过加key值来解决，比如切换后表格列数据显示异常，给table加一个key就可以了。加key之后会重新渲染，生成一个新的table。

TypeError: Cannot read property '***' of undefined

一般变量未定义错误，或者直接取对象里的未定义的值时也会报这个错误

也可能是插件引入问题，没找到插件

TypeError: Cannot read property  of undefined（reading '方法名'）

$nextTick 用法

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

// DOM 还没有更新
this.dialogVisitor = true
this.$nextTick(function () {
// DOM 更新了
// 执行一些方法
})

　　

this.不好使的时候，考虑在方法开头给this重新赋值

const vm=this

写一次即可，不要多次赋值

 

**element组件，props变量接收到的数据类型不匹配报错问题**

比如要求是数组，结果接收的是一个对象，就会报错

比如要求是字符串‘0’，结果接收的是数值0

这个具体是什么类型，是element组件定义的，看一下文档就知道了

控制台报错，翻译一下看看是什么错误，一般情况下搜报错英文百度都能找到答案

 

**尽量组件化**

比如，档案管理案卷列表上方 增加一个新功能，需要添加一个按钮，点击按钮，弹窗进行之后功能的操作，这个弹窗单独写一个组件，而不是写在案卷列表组件里。
在子组件内操作打开，关闭操作。
在点击确认按钮后，再向父级组件传递事件。

当一个组件样式可以共用时，最好把样式和数据分开，尽量不在这个组件里调数据
比如：一个可以共用的样式，两个地方用，展示的数据不一样。点击后请求的接口不一样。
用props传参，或者通过open方法传参
点击事件传递出去，在父组件中请求接口。

**ref很好用**

通过给子组件定义的ref来调取子组件中的方法
比如dialog弹窗组件，通过ref来调用开关方法，控制弹窗显示关闭

父子组件传值

子传父 $emit

父传子 props  ref

爷孙 provide reject

 

**好习惯

svn提交代码的时候，填写清晰的备注，比如【模块】+修改说明 ，如改bug +bug编号，这样便于后期查询修改原因。

代码注释：一些复杂业务逻辑地方，最好加一句注释，说明情况。注释业务逻辑，方便其他人理解

能从路由调取的就不要在页面里写死，比如页面的name，path，meta等

减少垃圾代码：自己写的并注释的代码，在测试通过后，就删掉。别留下一堆注释的垃圾代码。注：别人写的代码。不要随便修改或删除。

 

提交表单要加loading，避免接口慢的话，点击多次重复提交。注意：接口请求过慢的都需要加loading。