• 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等

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

  • 相关阅读:
    [导入]Zanzarah: The Hidden Portal Cheats
    [导入]Zanzarah Walkthrough
    Each的实现
    关于SQL命令中不等号(!=,<>)
    获取当前运行函数及调用函数
    MVC3.0学习2Razor视图引擎基础语法
    MVC 3.0 学习1
    java.io.IOException: Too many open files错误解决方案
    linux下执行命令输出乱码解决方案
    通用代码引擎生成工具 XDoclet 介绍
  • 原文地址:https://www.cnblogs.com/zwbsoft/p/16288790.html
Copyright © 2020-2023  润新知