vue开发问题记录

伟大的兔神
1,245 阅读6分钟

  1. GIt提交，无法检测到文件名称大小写的更改 解决：在当前项目中执行命令 git config core.ignorecase false

  2. 导出xlsx格式文件时，注意导出后：string类型字段默认会左对齐，number类型字段默认右对齐

  3. vue中禁用多选框checkbox，加上 @click.native.prevent 即可解决，阻止默认行为，disabled 框会变灰

  4. new Array(3).fill([]) 如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象

  5. ElementUI的el-table组件自适应宽度，在父元素display属性为flex时，会出现宽度一直增加的现象
    解决：参照网上，或不使用flex布局

  6. vue项目启动报错corejs的相关问题，可能是版本不兼容问题
    解决：npm install core-js@2

  7. JPEG是图像文件中的一种类型（格式），该类型的图像文件后缀名可以包含：JPEG 、JPG 、JPE 、JFIF 。所以图像的MIME类型中不会有：image/jpg，有的只是：image/jpeg

  8. ElementUI日期框组件回显日期时，可能会出现回显正确但重新选择后日期未改变的情况
    原因：回显赋值时，数据层级嵌套过深
    解决：采用this.$set()赋值

  9. 小程序跳转页面传参，采用？拼接参数的形式时，传递对象肯定会采用JSON.stringify()转成字符串进行传值
    注意：① URL最大长度2048个字符（同GET请求）；
    ② 若转义的对象中有\转义字符，需使用encodeURIComponent重新编码，在接收页面用decodeURIComponent再进行解码

  10. ElementUI如果一定要使用v-if来实现切换效果，

    注意：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可。

  11. ElementUI表单校验，一个页面用了两个el-form。两个都写了校验，即每一个form-item都写了prop，但是form1有一个没有写。结果怎么提交都不对。
    解决：把form1的prop都加上就解决啦，没有指定校验规则的也必须加上，必须在rules里面声明一个空的。

  12. 在flex布局下，容器内的项目采用自撑开，在项目总宽度超出容器宽度时，项目宽度会自动收缩，且此时设置宽度也不起作用

    原因：flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

    解决：将项目的flex-shrink属性设置为0

  13. ElementUI表单验证只有在设置required: true时才会在校验项前面显示红色的星号，如果是自定义校验且不能设置required: true，还想要红色星号，除了手动写css外，最简单的做法，在当前校验项直接添加class="is-required"

  14. axios请求为post类型时，参数中无data字段时，headers里的Content-Type无效果，这应该出于优化的层面，此时的Content-Length=0，无需向服务端提供Content-Type字段。

  15. vant覆盖组件样式写法为： ::v-deep

  16. 清理定时器可以如下，采用程序化的事件侦听器的做法：

methods:{
     fun(){
         const timer = setInterval(()=>{
             // TODO
         },1000);
         this.$once('hook:beforeDestory', () => {
             clearInterval(timer);
             timer = null;
         })
     }
 }

  1. fixed定位的元素，如果父级有transform样式，值不为none，那么fixed定位就会失效。
    解决方法：使用transform样式的元素，不要包含fixed定位的子元素。

  2. a、li等标签中使用img后的高度多了4px

    原因：img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线（baseline）对齐，而不是紧贴容器下边缘

    解决：

    • 1）将图像定义成img:{display:block;}
    • 2）给父级设置固定高度，然后 overflow:hidden
    • 3）设置 font-size:0;
    • 4）设置 img 的 vertical-align: bottom;
    • 5）设置 img 的 margin-bottom: -4px;

  3. appendChild() , insertBefore()插入节点需注意的问题： 如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。

  4. document.getElementById 和 document.querySelector的区别:

    • 1）querySelectorAll 属于 W3C 中的 Selectors API 规范 [1]。而 getElementsBy 系列则属于 W3C 的 DOM 规范 [2]

    • 2）querySelectorAll 方法接收的参数是一个 CSS 选择符，类似jq。而 getElementsBy 系列接收的参数只能是单一的className、tagName 和 name

    • 3）querySelectorAll 返回的是一个 Static Node List，而 getElementsBy 系列的返回的是一个 Live Node List。前者是快照，在之后再添加新的元素，不会影响已查询的结果；后者可以理解为一个仓库地址，查询出来的东西每次是不确定的，会跟随你之后的节点操作而动态改变。

  5. assets文件夹与static文件夹的区别：

    assets文件是src下的，所以最后运行时需要进行打包，assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式。build的时候由Webpack解析为模块依赖。而模块是不可以直接用绝对路径来使用的，需要使用import或require先引入一下，才可以使用。

    static/ 目录下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（默认是dist/static）下。必须使用绝对路径引用这些文件，这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

  6. 在package.json文件里有两个属性，一个是dependencies，另一个是devDependencies。前者适用于生产环境，后者适用于开发调试环境。有哪些包是install到dependencies？又有哪些包是install到devDependencies？
    发布后还需要用到的安装到dependencies，如axios；只在开发环境用到的安装到devDependencies，如babel。

  7. 在启用keep-alive后watch内的函数重复触发问题的原因：
    keep-alive会将Vue实例始终保持在内存中，因此该Vue实例始终存续，相应的watchers始终生效。所以在复用同一个子组件时，会看到watch内的函数被调用多次。

  8. 记录：eslint、code formatter 代码格式化配置vscode的setting.json

"eslint.validate": [
    "javascript",
    "typescript",
    "typescriptreact",
    "javascriptreact",
    "jsx",
    "html",
    "vue",
],
// code formatter
// 100 列后换行
"editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// prettier 设置语句末尾加分号
"prettier.semi": false,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// 让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettier": {
  "singleQuote": true,
  "semi": false
}
},
// Ctrl + Shift + F 快捷键设置（依照vetur格式化代码）
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
}
  1. 父组件监听子组件生命周期的简单方式：
//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},
    
//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
},    
    
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

  1. 对于抽象组件的理解： 自身不会渲染一个 DOM 元素，也不会出现在父组件链中。就好比拦截组件，能够对嵌套在其中的子组件做一些事情。

  2. 如何区分伪类与伪元素？ 答：元素就是结构，类就是样式。也就是说::after是伪元素 :hover是伪类。

  3. element-ui中table组件动态加载数据时出现表格错乱闪烁的解决方案：

doLayout
对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法

在组件的updated生命周期中使用this.$refs['table'].doLayout()重新渲染表格。

  1. 当使用refs时，如果refs自身的dom，或父级的dom是经过v-for渲染出来的，vue框架就会将refInFor设置成true然后ref.key在registerRef函数就被设置成了数组。

  2. 在父组件mounted中获取子组件实例时，需要注意子组件的父级是否使用了v-if、v-show、v-for

  3. VUEJS文件扩展名esm.js和common.js是什么意思?

vue.js：vue.js则是直接用在<script>标签中的，完整版本，直接就可以通过script引用。
vue.common.js：预编译调试时，CommonJS规范的格式，可以使用require("")引用的NodeJS格式。
vue.esm.js：预编译调试时， EcmaScript Module（ES MODULE)，支持import from 最新标准的。
vue.runtime.js：生产的运行时，需要预编译，比完整版小30%左右，前端性能最优。
vue.runtime.esm.js：生产运行时，esm标准。
vue.runtime.common.js：生产运行时，commonJS标准。

若是用vue+webpack开发项目（vue-cli采用的方式）:

开发环境用vue.esm.js
生产环境用vue.runtime.esm.js，比完整版小30%左右，前端性能更优

avatar
文章
阅读
粉丝