vue技巧汇总-持续更新

不同路由的的组件复用

• 优化

1. 给router-view绑定key

   <router-view :key="$route.fullpath"></router-view>

2. 如果组件被放在<keep-alive>中的话，可以把获取新数据的方法放在activated钩子，代替原来在created、mounted钩子中获取数据的任务。

多图表resize事件复用与节流

• 随着画布大小的改变，重绘图表，那么这里就需要用到节流函数，可以采用lodash的节流throttle函数，也可以自己通过setTimeout来实现
• 开发中，有各种各样的图表，这个时候，我们就可以将图表的创建、绘制、resize时间的绑定与解绑放到mixin中，起到复用的目的

  import Echarts from 'echarts'
  import _ from 'lodash'
  
  export default {
      computed: {
          /* 图表DOM */
          $_chartMixin_chartWrapperDom() {
          const dom = document.getElementById(this.thisDomId)
          return dom && Echarts.init(dom)
          },
  
          /** 图表resize节流，这里使用了lodash，也可以自己使用setTimout实现节流 */
          $_chartMixin_chartResize() {
          return _.throttle(() => this.$_chartMixin_chartWrapperDom.resize(), 400)
          }
      },
  
      methods: {
          /* 图表初始化 */
          $_chartMixin_initChart() {
          this.$_chartMixin_chartWrapperDom.setOption({ /* options */ })
      },
  
      mounted() {
          this.$_chartMixin_initChart()
          window.addEventListener('resize', this.$_chartMixin_chartResize)
      },
  
      destroyed() {
          window.removeEventListener('resize', this.$_chartMixin_chartResize)
      }
  }