项目中的新特性及写法

1. data.name?.length
   如果要访问 JavaScript 中对象的嵌套属性，则必须在每个级别检查是否为 null 或 undefined，否则最终将会抛出 TypeError。
   在以前，会通过这种写法避免（data.name && data.name.length）,这种写法不美观，且占用内存空间

如果表达式返回 null 或 undefined，则可选链运算符的左侧将始终返回 undefined

• JavaScript 中的可选链运算符

2. listeners
   $attrs--继承所有的父组件属性（除了prop传递的属性、class 和 style ）
   父组件传递下来的，但是在你调用的那个组件里没有注册使用，需要继续传递下下去的所有。
   根组件：

//根组件里的引用的子组件，需要将message title age name 等数据传递到son组件里

子组件：

//子组件里引用孙组件，子组件声明了title属性，剩下的age、name还需要继续往下传递

如此往下，如果根组件定义了很多自定义属性都要绑定，写起来很麻烦，所以$attrs就排上了用场，子组件可以这样写：

listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。（相当于子组件继承父组件的事件）

3. jsx写法
   此处较多，详见“vue中使用jsx”

4. && || 灵活运用
   a. :class="inputValue && 'hasInitial'"
   如果inputValue值不为空，则class='hasInitial',为空，则class=''

b. initialValue = initialValue[0] || []
如果initialValue[0]不为空，则initialValue[0]，为空则[]

综合：&& 前true则后，前false则前
|| 前true则前，前false则后

5. scss篇

• 变量基本构成：
  $color:red; $ 变量声明符，color 变量名称，red 变量值
• 多个值取一个值nth（开始的下标不是0是1）

$divColor: orange green;
div{
  background-color: nth($divColor,2)
}

• 传递多个参数

  
@mixin box-shadow($shodw...){
    box-shadow:$shodow;
}
div{
    @include box-shadow(-5px 0 5px orange,5px 0px 5px blue)
}

• 代替样式名称#{}

@mixin set-value($direction){
    margin-#{$direction}:10px;
    padding-#{$direction}:10px;
}
.input-box{
    @include set-value(bootom);
}

这样可以用于公共样式书写
eg:

@mixin btn-bg-color($btnclass,$bgcolor){
    .btn-#{$btnclass}{
        background-color:$bgcolor
    }
}
@include btn-bg-color('warning',#5cb85c)

• 默认值的设置及修改

@mixin transform($deg:20deg){
    transform:rotate($deg);
    -webkit-box-shadow:rotate($deg);
    -moz-box-shadow:rotate($deg);
    -o-box-shadow:rotate($deg);
    -ms-box-shadow:rotate($deg);
}
.box{
    @include transform(50deg);
}

• 混入mixin
  a. 定义通用的样式，在页面中使用
  _mixins.scss中：

  @mixin box-shadow($shodw...){ //传递多个参数
      box-shadow:$shadow;
    }
  

  普通页面中：

  .card{
    height: 50px;
     @include box-shadow(-5px 0 5px orange,5px 0px 5px blue)
  }
  

  b.递归出样式，适用于针对不同状态，赋予不同颜色等等

  @each $idx, $color in (1, $color-theme_blue),
    (2, $color-theme_orange),
    (3, $color-theme_red),
    (4, $color-theme_purple) {
    .legend-item--level#{$idx}{
       color: $color;
       &::before{
         background-color: $color;
        }
      }
   }
  

  c. 换肤功能
  variables.scss:

  $bg-body-black: #000000;
  $bg-body-light: #FFFFFF; //设置不同皮肤时变量色值
  :export {   //这里导出，是用于在script中使用色值。特别是echarts中
    lightBgBody:$bg-body-light;
    blackBgBody:$bg-body-black;
  }
  

  _mixins.scss:

  @mixins bg_color($color,$background-color:'background-color'){
     //此处为$background-color设置默认值‘background-color’，为了这个公共色值去设置color、border等其他属性
   #{$background-color}: $color;   
  //为属性设置变量
    [data-theme='light'] & {
      #{$background-color}: $bg-body-light;
     }
    [data-theme='black'] & {
      #{$background-color}: $bg-body-black;
     }
  }
  
  

换肤按钮所在页面：

  toggleTheme(type) {
      window.document.documentElement.setAttribute('data-theme', type)
      this.$store.dispatch('common/setTheme', {
        theme: type
      }) 
    }

用到需要换肤的页面：

6. ResizeObserver对单个元素进行大小监听

const resizeOb= new ResizeObserver(entries => {
    for(const entry of entries) {
        console.log(entry)
    }
})
resizeOb.observe(document.getElementById("test"))
//打印结果 {target: div#test, contentRect: DOMRectReadOnly}

通过实例化一个监听器，然后调用observe方法传入一个要执行监听的DOM元素或SVG元素，那么每次resize事件触发时都会执行ResizeObserver实例化时传入的回调函数，改回调函数默认会返回一个数组，数组里包含了每个被执行了监听器的元素及其可读信息，元素的拜访顺序也是监听器执行的顺序（对，实例化一个监听器，可多次执行observe方法对不同元素进行监听！）
ResizeObserver是在resize的过程中调用的，resize本身属于频繁触发的事件，在期间穿插太多逻辑其实对性能影响较大，如果只是想对某个元素变动后执行某个回调的话，建议最好搭配函数节流进行使用。