vue开发经验库

1、package-lock.json的作用

 

参考:https://juejin.im/post/6844903821588561933

package.json的作用是指定依赖库,在npm install时执行。

1)对组件版本有要求对时候,一般指定安装版本

"axios": "0.19.0"

2)对组件版本有大版本依赖时,一般指定向后兼容,此时不会升级安装1.xx.x

"axios": "^0.19.0"

3)对组件次版本有依赖时,一般如下配置,会安装符合的0.19.x

"axios": "~0.19.0"

配置了一套稳定环境后,如果希望其他协同开发人员npm install时保持环境协同一致,那么就把稳定环境人的pakage-lock.json上传(npm install后会自动生成)

2、watch一个空字符串的失效场景

a=''; // 初始值

watch: {

    a: {

        xxxxxx

    }

},

在上面场景中,如果a已经是'',这时再给它负值 a = '',不会触发watch,但是如果a初始是 [],a = []再负值是会触发watch的。因此这里大概猜测:watch判定修改,地址变化算([]-obj),内容变化算,如果地址和内容都没变那么就不算。

3、el-select的el-option设置大坑

和官方的用法保持一致:

但实际展示:

换一种写法可以解决问题(下图):

element-ui 12.xx.x

元组的第一位是value,第二位是key

4、props传递boolean时需要用v-bind模式否则按字符串判定

比如:我们定义了

父组件传递时需要如下写法:

:isSetDefault="false"

否则就是子组件接收到到就是string类型

5、iframe添加loading

有人说使用onreadystatechange,但该属性是IE支持但chrome等已经不支持的属性。

有人建议 load事件监听:https://stackoverflow.com/questions/19384661/iframe-onreadystatechange-function

查询手册,确认可以使用 onload event来监听加载完成,并执行动作。因此我们可以在加载之前展示一个loading div。加载完成后隐藏loading div,展示iframe.

实践过程发现: