vue2.X 前端易错问题和注意事项汇总

6 篇文章 0 订阅

 
1、方法中只有一个参数又指定了默认值时可能会出问题、因为在onlick事件调用时如果不传参数  会默认把事件传过来做参数

2、v-model 绑定了一个没有的对象属性时,自己会在beforeUpdate方法中自己创建

3、continue只有在for中才生效

4、iview日期组件可能会出BUG,如果用的是v-model获取到的是utc时间,提交时间少8小时。所以不要通过v-model去绑定  

5、Duplicate keys detected: '1'. This may cause an update error  :key的值重复了
在连续遍历集合时 如果:key的值一样的话会出错   解决:改变index的值 如v-for="item2,lindex2 in list" :key="'c'+lindex2"

6、scrollTop需要在nextTick内设置才会生效

document对象,是由于DTD的指定问题 → <!DOCTYPE html>

页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。

页面没有DTD,即没指定DOCTYPE时,使用document.body。

7、像src这种静态路径,因为开发和打包会出现路径不同,所以不能src不能放在data里直接用字符储存这种引入路径是无效,因为webpack是按字符号打包的,不会做任何处理。所以需要import在外部引入或者require内部引入。发布后还得按需求修改配置文件。

8、img 的@load 及时更换src后 e事件的图片参像不一定拿到真实的尺寸,还是需要方法内手动new image 在onload里获取

9、当需要拿dom的clientWidth时 如果你的父元素有%比例时 可能会拿不到真实的值,因为浏览器一开始渲染dom元素的时候是没有滚动条的  当页面出现了滚动条会影响到原来的宽度,滚动条的宽度也是算在页面%比宽度内的

10、多次用v-if 渲染时 需要加v-else-if,不然会在页面上生成多余的 <!--->注释空标签,不方便看清页面结构

11、递归时如果依赖上一次的结果时,需要在下一个自调方法前面使用return 

12、vue组件有时候组件会注册不上,这是因为产生了循环依赖。

官方解释:为了解释这里发生了什么,我们先把两个组件称为 A 和 B。模块系统发现它需要 A,但是首先 A 依赖 B,但是 B 又依赖 A,但是 A 又依赖 B,如此往复。这变成了一个循环,不知道如何不经过其中一个组件而完全解析出另一个组件。为了解决这个问题,我们需要给模块系统一个点,在那里“A 反正是需要 B 的,但是我们不需要先解析 B。”

解决方法1:

在我们的例子中,把 <tree-folder> 组件设为了那个点。我们知道那个产生悖论的子组件是 <tree-folder-contents> 组件,所以我们会等到生命周期钩子 beforeCreate 时去注册它:

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

解决方法2:

或者,在本地注册组件的时候,你可以使用 webpack 的异步 import

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

13、&& 返回值判定  当有条件不满足时会立即返回,全部满足时会返回最后一个条件的值

如:  let res=0&&1  res=0; res=1&&0&&2  res=0

       let res=1&&2&&3; res=3

14、npm 安装依赖 以及dependencies 和 devDependencies的区别

npm install 依赖  (已经安装上了 , 但在package.json 中没有,不能通过npm i 安装)

npm install 依赖  --save (已安装,依赖包的名称在package.json的dependencies中, 可通过npm i 安装)

npm install 依赖  --save-dev (已安装,依赖包的名称在package.json的devDependencies中, 可通过npm i 安装)

dependencies 和 devDependencies区别

devDependencies  里面的插件只用于开发环境,不用于生产环境,而 dependencies  是需要发布到生产环境的。

vue 项目中

若文件中import  引入 devDependencies 中插件   依然会把当前引入的插件打包到文件中,   不引入  ,则不打包。

而 dependencies 中的插件不管你引不引入都会打包到文件中去。

15、fixed 遇到 transform就失效,transform会产生一个新的块,他里面的元素的fixed定位会把他当做参照

16、内联元素不可以设置宽高,可以设置margin,padding,但只在水平方向有效。如span i

17、 vertical-align 当作用于行块元素时,是对自身和兄弟产生效果,且必须需要至少一个节点高度和父元素高度一样,把高度撑开后,基线才会生效,但是负责撑开的元素自己确无法对齐。

所以想快速解决垂直居中的话可以利用伪元素当作第一个兄弟节点撑开DIV,之后的就能随着一起垂直居中

.parent::before{
  content: '';
  height: 100%;
  width: 0;
  display:inline-block;
  vertical-align: middle;
}
.child{
  display:inline-block;
  border:1px solid blue;
  vertical-align: middle; 
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值