2020-12-28

1.watch immediate

watch一个变量时，初始化时不会触发，created手动触发不太优美

//good
watch:{
    text:{
        handler:fetchXX,
        immediate:true,//初始化也能触发
        deep:true//深度监听
    }
}

2.使用?.和??（es2020新特性）

利用可选链和双问号提高快速开发效率

1、安装

@babel/plugin-proposal-optional-chaining // 可选链
@babel/plugin-proposal-nullish-coalescing-operator // 双问号

2、babel.config.js或.babelrc中引入插件

{
    plugins:[
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-optional-chaining"
    ]
}

3.实践
1.可选链

多层对象属性（a.b.c）中若b为空或undefined则报错

//1.常规是通过复杂条件判断
//2.现在是使用?.解决
a.b&&a.b.c?a.b.c:undefined
===
a?.b?.c

2.双问号设置默认值

value1??value2 当value1为null或undefined取value2否则取value1

//1.常规是o.c||默认值 若某属性值为**null**或*undefined*时，我们为其指定默认值,当o.c 为0时取默认值，假设本身值就是0 此时属于逻辑错误
//2.现在是使用??代替||
const c_or_d = (o.c === null || typeof o.c === "undefined") ? o.c : 'd'
===
console.log(c_or_d) // 'd'
console.log(0 ?? 1) // 0
console.log("" ?? "foo") // ""

3、动态import

之前懒加载()=>import(/**webpackChunkName:’’*/’’);需利用模块打包工具 如webpack

//点击之后在加载模块
window.addEventListener('click',()=>{
    import().then(module=>{}).catch(err=>{}) 
})

4、Promise.allSettled

最大限度保障业务状态可访问性

1、promise.all()用来并发执行异步任务，但是某个任务出现异常(reject),所有任务都会挂掉，直接进入catch回调

2、promise.allSettled()并发执行异步任务，无论任务成功或异常，均会返回对应状态，可在then里面通过filter过滤想要的业务逻辑结果

Promise.allSettled([
  Promise.reject({code: 500, msg: '服务异常'}),
  Promise.resolve({ code: 200, list: []}),
  Promise.resolve({code: 200, list: []})
])
.then((ret) => {
  /*
    0: {status: "rejected", reason: {…}}
    1: {status: "fulfilled", value: {…}}
    2: {status: "fulfilled", value: {…}}
  */
  // 过滤掉 rejected 状态
  handleData(ret.filter((el) => {
    return el.status !== 'rejected';
  }));
});

5、短路条件语句执行某方法

在某个条件下执行方法

//1.常规
if(bool){
    dosomething()
}
//2.现在
bool&&dosomething()

6、Object.is(a,b)判断a,b是否相同

//1.解决== 类型强制转换问题
//2.解决=== 判断NAN===NAN的局限

7、数组传递空参数

//1、常规 fun(params1,null)
//2、fun(...[params1,''])

8、多维数组扁平化

//默认拉平一层,num值默认1,可不填,Infinity为无论几层都拉平
arr.flat(num);
[].concat(...arr)

9、globalThis

js在不同环境获取全局对象有不同方式 比如web中有window，self等

globalThis提供一种标准化方式访问全局对象

调试template

有时会遇到template模板渲染时JavaScript变量出错问题，可通过console.log调试

// main.js
Vue.prototype.$log = window.console.log;

// 组件内部
<div>{{$log(info)}}</div>