技术知识整理

openTSDB:http://opentsdb.net/docs/build/html/index.html

hbase:https://hbase.apache.org/book.html#quickstart

vue:

vue:https://cli.vuejs.org/zh/guide/creating-a-project.html

Vue Beautyhttps://fe-driver.github.io/vue-beauty/#/components/tree

通过highlight.js在vue中实现代码高亮 https://www.jianshu.com/p/e35f6d62b3bd

自动化构建工具 plop

vue篇之事件总线（EventBus）: https://blog.csdn.net/q3254421/article/details/82927860

Vue自定义指令完成按钮级别的权限判断：https://www.cnblogs.com/home-/p/11888720.html

Vue 开发技巧或者说Vue知识点梳理： https://www.cnblogs.com/sybboy/p/11805368.html

1.require.context() 导入多个组件,利用 require.context 简写

2.直接利用 watch 的immediate和handler属性简写：

watch: {
  inpVal:{
    handler: 'getList',
      immediate: true
  }
}

$on(‘hook:’) 可以帮助你简化代码

删除事件监听器是一种常见的最佳实践，因为它有助于避免内存泄露并防止事件冲突。

如果你想在 created 或 mounted 的钩子中定义自定义事件监听器或第三方插件，并且需要在 beforeDestroy 钩子中删除它以避免引起任何内存泄漏，那么这是一个很好的特性。下面是一个典型的设置：

mounted () {
    window.addEventListener('resize', this.resizeHandler);
},
beforeDestroy () {
    window.removeEventListener('resize', this.resizeHandler);
}

使用 $on('hook:')方法，你可以仅使用一种生命周期方法（而不是两种）来定义/删除事件。

mounted () {
  window.addEventListener('resize', this.resizeHandler);
  this.$on("hook:beforeDestroy", () => {
    window.removeEventListener('resize', this.resizeHandler);
  })
}

on 还可以侦听子组件的生命周期钩子

最后一点，生命周期钩子发出自定义事件这一事实意味着父组件可以监听其子级的生命周期钩子。

它将使用正常模式来监听事件（@event），并且可以像其他自定义事件一样进行处理。

<child-comp @hook:mounted="someFunction" />

ue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。

1.修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，并且在生成环境是可以通过map去查看到源码的，这样会造成源码泄漏，这里建议大家设置为false。productionGzip设置为true可以开启gzip压缩，使打包过后体积变小。

functional：函数式组件，用于子组件的渲染（实际可能用到的很少啊，因为这一点点性能优化肉眼不可见，更何况我们写项目的时候更多的时候是为了实现功能，这一点点的优化对于缩短浏览器的渲染的效果很微小，但做项目的时候时刻注意到性能优化最终的优化效果肯定是很可观的。）
优化前：

<template>
  <div class="cell">
    <div v-if="value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>

<script>
export default {
  props: ['value'],
}
</script>

优化后

<template functional>
  <div class="cell">
    <div v-if="props.value" class="on"></div>
    <section v-else class="off"></section>
  </div>
</template>

react:

Ant Design Pro: https://pro.ant.design/docs/getting-started-cn

ant.design: https://ant.design/components/icon/

ProComponents: https://procomponents.ant.design/components/form/

画图： https://www.processon.com/

js: