es6技巧写法

怼烎@ 2022-04-10 04:52 292阅读 0赞

## 为class绑定多个值 ##

*  普通写法

:class="{a: true, b: true}"

*  其他

:class="['btn', 'btn2', {a: true, b: false}]"

## 一个值判断a或者判断b ##

*  普通写法

if(flg === a || flg === b)

*  其他

['a','b'].indexOf(flg) > -1

## 引用一个组件 ##

*  普通写法

import a from './a.vue'
    componets: {
        a
    }

*  node写法

components: {
        a: require('./a.vue')
    }

## V-FOR渲染 ##

*  一般

<li v-for="(item,index) in data" :key="index">
        {
       {item.uuid}} //输出uuid字段
    </li>

*  解构赋值

<li v-for="{uuid} in data" :key="uuid">
        {
       {uuid}} //直接解构赋值输出
    </li>

## CSS私有化 ##

*  一般

> 设置比较长的class类名区分，或者使用BEN等命名方法

*  css module

style样式会存在$style计算属性中

//调用方式
    <h3 :class="$style.h3"></h3>
    //$style是计算属性，所以也可以这样 bool为Bool表达式
    <h3 :class="{$style.h3: bool}"></h3>

> 缺点： 生成一个独一无二的class类名，只能使用类名class控制样式

*  scoped

> 生成Hash属性标识.且 `根元素`受 `父组件`的scoped影响

### 解决办法 ###

> 使用 `>>>`深度选择器

//寻找div下的样式，包括子组件样式
    div >>> .h3 { }

## 对象操作 ##

> 对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。

// bad
    const a = {};
    a.x = 3;
    
    // if reshape unavoidable
    const a = {};
    Object.assign(a, { x: 3 });
    
    // good
    const a = { x: null };
    a.x = 3;

> 如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。

// bad
    const obj = {
      id: 5,
      name: 'San Francisco',
    };
    obj[getKey('enabled')] = true;
    
    // good
    const obj = {
      id: 5,
      name: 'San Francisco',
      [getKey('enabled')]: true,  //属性表达式 6
    };

## 数组、对象参数使用扩展运算符(spread) ##

### 连接多个数组 ###

*  一般

let arr1 = [1,2,3]
    let arr2 = [4,6,7]
    arr2 =  arr2.concat(arr1)

*  spread 运算符

let arr1 = [1,2,3]
    let arr2 = [...arr1,4,6,7]

### 连接多个json对象 ###

*  一般

var a = { key1: 1, key2: 2 }
    var b = Object.assign({}, a, { key3: 3 })
    // 最后结果
    {key1: 1, key2: 2,key3: 3 }

*  spread 运算符

var a = { key1: 1, key2: 2 }
    var b = {...a, key3: 3}

## es6剩余参数（rest paramete） ##