2021-04-13

vue key

vue 的 diff 算法有就地复用原则，在循环时候指定 key 可以通过 唯一 key 更好的判断新旧 虚拟dom 的变化情况，从而消除就地复用带来的影响
带 key 会生成 map 结构一一对应关系，不带 key 的话则是全量循环找出新旧 虚拟dom

防抖节流

/* 防抖 点一下就重新倒计时 */
function debounce(cb, time) {
  let timer = null; // 闭包
  return function(...args) {
    clearInterval(timer)
    timer = setTimeout(() => cb.apply(this, args), time)
  }
}
    
/* 节流 技能有 CD */
function throttle(cb, time) {
  let flag = true; // 闭包
  return function(...args) {
    if (!flag) return
    flag = false
    cb.apply(this, args)
    setTimeout(() => flag = true, time)
  }
}

function sayHi(e) {
  console.log(e)
}
window.onclick = throttle(sayHi, 500)

Set/WeakSet/Map/WeakMap

Set 类似去重过的数组，成员都是唯一的

[...new Set(arr)]

WeakSet 类似 Set，但是他只接受对象，并且引用是弱引用，垃圾回收机制不考虑 WebSet 中的引用

Map 是传统 Object 的 key 会被转化为 字符串

const element = document.getElementById('myDiv');
data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"

WeakMap 类似 只能接受引用类型的 key null 除外

---

生产环境去 console

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

const plugins = []
if (IS_PROD) {
  plugins.push('transform-remove-console')
}

// lazy load ant-design-vue
// if your use import on Demand, Use this code
plugins.push(['import', {
  'libraryName': 'ant-design-vue',
  'libraryDirectory': 'es',
  'style': true // `style: true` 会加载 less 文件
}])

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@babel/preset-env',
      {
        'useBuiltIns': 'entry',
        'corejs': 3
      }
    ]
  ],
  plugins
}