Vue 中使用@hook监听组件生命周期

通常我们监听组件生命周期会使用 $emit ，父组件接收事件来进行通知

子组件

export default {
    mounted() {
        this.$emit('listenMounted')
    }
}

父组件

<template>
    <div>
        <List @listenMounted="listenMounted" />
    </div>
</template>

其实还有一种简洁的方法，使用 @hook 即可监听组件生命周期，组件内无需做任何改变。同样的， created 、 updated 等也可以使用此方法。

<template>
    <List @hook:mounted="listenMounted" />
</template>

链式判断运算符 ?.

原代码：

const username = (list && list.info && list.info.userName) || “userName”

可以改成：

const username = list?.info?.userName || ‘userName’

Null****判断运算符 ??

源代码：

const username = list.name == null || list.name == undefined ? ‘userName’: list.name;

可以改成：

const uerName = list.name ?? ‘userName’;

封装一个获取位置的方法

优化前

function getPosition(direction){
    if(direction == "left"){
        return "左"
    }else if(direction == "right"){
        return "右"
    }else if(direction == "top"){
        return "上"
    }else if(direction == "bottom"){
        return "下"
    }else{
        return "未知"
    }
}

优化后

function getPosition(direction){
    return ({
        left:"左",
        right:"右",
        top:"上",
        bottom:"下"
    })[direction] || "未知"
}

单个 if else 执行不同方法 优化策略

从一个例子说起： demo 方法传true执行 success 方法，传 false执行 error方法

function success(){
    console.log("success")
}

function fail(){
    console.log("fail")
}
 
function demo(flag){
    if(flag){
        success()
    }else{
        fail()
    }
}

看了以上多个例子后，你也许会这么优化：

function demo(flag){
    flag?success():fail()
}

这个应该是最常用的，true 就执行success，false 就执行 fail

补充一个不常见的

// 如果你不能保证 你所传的参数一定是布尔值的话 用这种

function demo(flag){
    [false,true].includes(flag)&& [fail,success][Number(flag)]()
}

// false 转成 0 ，对应执行success ，true 转成 1，对应执行 fail

// 如果你能保证 你所传的参数一定是布尔值的话 用这种

function demo(flag){
    [fail,success][Number(flag)]()
}

此种优化策略，结合了 布尔值的false和true是可以转成 0 和1，因此可以拿来当索引使用