不同路由的的元件複用

如果不同路由跳轉的是同一個元件，就會發現奇怪的問題，頁面資料沒有更新，created函式裡面的方法沒有執行，通常的解決的方法是採用對$route做監聽，再去執行created裡面的方法

• 優化

1. 給router-view繫結key

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

   如果要保證獨一無二的可以再其後面加上+ +new Date()時間戳

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)
      }
  }