学习记录001

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,因此可以拿来当索引使用

上一篇:驰骋工作流引擎设计系列01 流程元素设计


下一篇:Elasticsearch入门,看这一篇就够了