回顾  前期  

趁着下班前五分钟书写——Vue3通讯(常规写法、语法糖、v-modle、兄弟通讯)_0.活在风浪里的博客-CSDN博客Vue3 组件通讯https://blog.csdn.net/m0_57904695/article/details/128145150?spm=1001.2014.3001.5501 

目录

 一、可选链接运算符【？.】

 二、空值合并操作符【??】

 三、提升代码可读性，减少 if-else 几个小技巧 ☠

对象配置/策略模式📑 【重要 好用】

四、Vue3 setup设置name

结语： 

---

 

一、可选链接运算符【？.】

左面值不是null 和 undefined，就执行右面的值（拼接上左面）

不使用 可选链接运算符

if (data && data.children && data.children[0] && data.children[0].title) {
    // I have a title!
}

使用后

let title = data?.children?.[0]?.title;

对于静态属性用法是：

object?.property

对于动态属性将其更改为：

object?.[expression] 

 对于方法的调用你可以这样写

object.runsOnlyIfMethodExists?.()

举例：

let parent = {
    name: "parent",
    friends: ["p1", "p2", "p3"],
    getName: function() {
      console.log(this.name)
    }
  };
  
  parent.getName?.()   // parent
  parent.getTitle?.()  //不会执行

二、空值合并操作符【??】

空值合并操作符（??）是一个逻辑操作符，
当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。

console.log(null ?? 666)   
console.log(undefined ?? 666)
// 以上输出结果都为666

 ?? 与 || 的区别

One ?? Two
One || Two

相同点：
?? 和 || 的语法相同。

不同点:

判断的方法不同：
使用 ?? 时，只有One为 null 或者 undefined 时才会返回 two;
使用 || 时，One会先转化为布尔值判断，为true时返回One , false 返回Two，

若左边能转成true，返回左边式子的值，反之返回右边式子的值；

---

 // ??
  undefined ?? 2    // 2
  null ?? 2        // 2
  0 ?? 2            // 0
  "" ?? 2            // ""
  true ?? 2        // true
  false ?? 2        // false

 // ||
  undefined || 2    // 2
  null || 2        // 2
  0 || 2            // 2
  "" || 2            // 2
  true || 2        // true
  false || 2        // 2

顺便记录下转布尔值的两种方法 

方法一：使用 双重逻辑非  !!，语法 【!!要转换的值】

方法二：使用Boolean()函数，可以强制把值转换为布尔值，语法 【Boolean(字符串)】

---

 三、提升代码可读性，减少 if-else 几个小技巧 ☠

 使用 if else

let c
if(a){
    c = a
} else {
    c = b
}

使用 || 短路运算符 （会先转换为布尔值，若左边能转成true，返回左边式子的值，反之返回右边式子的值） 

let c = a || b

---

例：有A、B、C、D四种种类型，在A、B的时候输出1，C输出2、D输出3，默认输出0。

let type = 'A'

//if else if
if (type === 'A' || type === 'B') {
    console.log(1);
} else if (type === 'C') {
    console.log(2);
} else if(type === 'D') {
    console.log(3);
} else {
    console.log(0)
}

//switch case
switch (type) {
    case 'A':
    case 'B':
        console.log(1)
        break
    case 'C':
        console.log(2)
        break
    case 'D':
        console.log(3);
        break;
    default:
        console.log(0)
}

对象配置/策略模式📑 【重要 好用】

接下来我们用对象配置的方法实现一下上述的例子

let type = 'A'

let tactics = {
    'A': 1,
    'B': 1,
    'C': 2,
    'D': 3,
    default: 0
}
console.log(tactics[type]) // 1

接下来用几个例子让大家更加熟悉一点。

例一：根据不同的用户使用不同的折扣，如：普通用户不打折，普通会员用户9折，年费会员8.5折，超级会员8折

先使用 if else 实现😢

// 获取折扣 --- 使用if else
const getDiscount = (userKey) => {
    if (userKey === '普通会员') {
        return 0.9
    } else if (userKey === '年费会员') {
        return 0.85
    } else if (userKey === '超级会员') {
        return 0.8
    } else {
        return 1
    }
}
console.log(getDiscount('普通会员')) // 0.9

在 使用对象配置/策略模式实现🙂

// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
    // 我们可以根据用户类型来生成我们的折扣对象
    let discounts = {
        '普通会员': 0.9,
        '年费会员': 0.85,
        '超级会员': 0.8,
        'default': 1
    }
 // 如果左边值转换布尔值后为true就返回左边，否则反之 
    return discounts[userKey] || discounts['default']
}
console.log(getDiscount('普通会员')) // 0.9

从上面的案列中可以明显看得出来，使用对象配置比使用if else可读性更高，后续如果需要添加用户折扣也只需要修改折扣对象就行👍

---

对象配置不一定非要使用对象去管理我们键值对，还可以使用 Map去管理🦋，如：

// 获取折扣 -- 使用对象配置/策略模式
const getDiscount = (userKey) => {
    // 我们可以根据用户类型来生成我们的折扣对象
    let discounts = new Map([
        ['普通会员', 0.9],
        ['年费会员', 0.85],
        ['超级会员', 0.8],
        ['default', 1]
    ])
    return discounts.get(userKey) || discounts.get('default')
}
console.log(getDiscount('普通会员')) // 0.9

例二：绩效为A的人年终奖有4倍工资，绩效为B的有3倍，绩效为C的只有2倍。

const calculateBonus = (performanceLevel, salary) => { 
    if (performanceLevel === 'A'){
        return salary * 4
    }
    if (performanceLevel === 'B'){
        return salary * 3
    }
    if (performanceLevel === 'C'){
        return salary * 2
    }
}
calculateBonus( 'B', 20000 ) // 输出：60000

完成了，但是如果增加了一种新的 绩效等级D，或者把 A等级的倍数改成5，那我们必须阅读所有代码才能去做修改

所以我们可以用对象配置/策略模式去简化这个函数😺

let state = new Map([
    ['A', 4],
    ['B', 3],
    ['C', 2]
])

const hCalc = (type, money) => { 
    return state.get(type) * money
}

 hCalc( 'B', 20000 ) // 输出：60000

---

四、Vue3 setup设置name

在 vue3 中使用 setup 语法时，指定 name 属性有三种方式，个人推荐最后一种方式。

方式1：传统方式

传统方式是使用 defineComponent() 方法定义组件，通过对象形式设置 name 属性和 setup 函数传递给该方法。代码如下：

<template>
  <div>
    Test, {{str}}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'Test',
  setup: () => {
    const str = ref('hello')
    return {
      str
    }
  }
})
</script>

方式2：两个 script 标签

这种方式与传统方式类似，只是在传统方式的基础上，将 setup 提取到另一个标签中。代码如下：

<template>
  <div>
    Test, {{str}}
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
const str = ref('hello')
</script>

<script lang="ts">
export default defineComponent({
  name: 'Test'
})
</script>

这种方式在 webstorm 中写起来很不顺手，webstorm 总是自动合并两个 script 标签中的代码。

方式3：优雅的方式

这种方式个人最推荐，首先安装配置插件，之后在 script 标签上指定 name 属性即可，一劳永逸。

安装插件 vite-plugin-vue-setup-extend，该插件的作用就是使 vue script setup 语法支持 name 属性。

yarn add vite-plugin-vue-setup-extend -D

在 vite.config.ts 中配置插件：

import vueSetupExtend from 'vite-plugin-vue-setup-extend';


export default defineConfig({
  plugins: [
    ...
    vueSetupExtend(),
    ...
  ],
  ...
})

完成插件的配置后，便可以在 script 标签上指定 name 属性：

<template>
  <div>
    Test, {{str}}
  </div>
</template>

<script lang="ts" setup name="Test">
import { ref } from 'vue'
const str = ref('hello')
</script>

这种方式需要特别注意，如果 script标签中内容为空时，name 属性就无法加载。一定要确保 script 标签内一定要有内容，哪怕是一行注释也行：

<script lang="ts" setup name="Test">// ...</script>

结语： 

本文到这里就要完结了，感谢你的阅读！再见，