同时触发Promise

多个`await`命令后面的异步操作，如果不存在继发关系（即互不依赖），最好让它们同时触发。

let promise1 = await promise1(); 
let promise2 = await promise2(); 
console.log(promise1,promise2)
// 上面这样写法 promise1完成以后，才会执行promise2

// 同时触发写法 ↓ 

// 写法一 
let [p1, p2] = await Promise.all([promise1(), promise2()]); 
console.log(p1,p2)

// 写法二 
let p1 = promise1(); 
let p2 = promise2(); 
let callback1 = await p1; 
let callback2 = await p2;
console.log(callback1,callback2)

---

减少判断层级

function doSomething (part,level) {
    const parts = ['ES2016', 'Vue', 'React', 'Node'];
    if (part) {
        if (parts.includes(part)){
            console.log('找到了');
            if(level < 5) {
                console.log('等级不够');
            }
        }
    } else {
        console.log('请确认信息');
    }
}
doSomething('ES2016', 4);

VS

function doSomething (part,level) {
    const parts = ['ES2016', 'Vue', 'React', 'Node'];
    if (!part) {
        console.log('请确认信息');
        return
    }
    if (!parts.includes(part)) return;
    console.log('找到了');
    if(level < 5) {
        console.log('等级不够');
    }
}
doSomething('ES2016', 4);

执行起来的话，肯定是下面的执行速度更快

---

一个条件做判断，然后改变一个变量的bol值

if(this.msg === 1) {
    this.bol = true;
} else {
    this.bol = false;
}
可优化
this.bol = this.msg === 1;

---

通过一个bol值来判断两个dom显示隐藏

<template>
    <button v-if="isEditing" key="save">Save</button>
    <button v-else key="edit">Edit</button>
</template>
可优化
<template>
    <button :key="isEditing">{{isEditing ? 'Save' : 'Edit'}}</button>
</template>

---

通过一个字段来判断多个dom的显示隐藏

<template>
    <button v-if="docState === 'saved'" key="saved">Save</button>
    <button v-if="docState === 'edited'" key="edited">Edit</button>
    <button v-if="docState === 'cancel'" key="editing">Cancel</button>
</template>
可优化
<template>
    <button :key="docState">{{buttonMessage}}</button>
</template>

computed:{
    buttonMessage: function () {
        switch (this.docState) {
            case 'saved':
                return 'Save'
            case 'edited':
                return 'Edit'
            case 'cancel':
                return 'Cancel'
        }
    }
}

---

可选链操作符（?.）

当访问多层对象属性（res.data.list）时,如果属性res.data为空，则会报引用错误，为此我们不得不这个么处理：

let dataList = res&&res.data&&res.data.list;

这样看着不美观，可以用可选链操作符（?.）

let dataList = res?.data?.list;

---

组件懒加载

vue组件，当父组件引用子组件，子组件中又引用了父组件时，如下:
this.$refs.detailDialog.openDialog();
ref属性找不到，打印this.$refs.detailDialog,打印出来的是dom元素，父组件引用子组件，子组件又去引用父组件，这样就会造成无线循环，就找不到子组件中的方法。
解决：子组件中引用父组件时，使用组件懒加载。
components: {
    father: resolve => {require(['./father.vue'], resolve)}
}

不用 import father from "./father" 这种方式。

---

vue虚拟列表实现

blog.csdn.net/weixin_4517…

循环表单，第一个表单验证报错后，删除第一个，验证报错转移到下一个表单上

循环表单的key不绑定index，绑定item或者item.id即可。

---

用??代替|| 用于判断运算符左侧的值为null或undefined时

`??`被称为`null`判断运算符,它的行为类似`||`，但是更严

`||`运算符是左边是空字符串或`false`或`0`等falsy值，都会返回后侧的值。而`??`必须运算符左侧的值为`null`或`undefined`时，才会返回右侧的值。因此0||1的结果为1，0??1的结果为0