vue技巧彙總-持續更新

不一樣路由的的組件複用

若是不一樣路由跳轉的是同一個組件，就會發現奇怪的問題，頁面數據沒有更新，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)
      }
  }

阻止瀏覽器

有時候咱們輸入帳號密碼登陸後臺系統，瀏覽器會彈出是否保存你的登陸信息。咱們通常會點擊保存，由於下次再次登陸的時候會自動填充增長了咱們的用戶體驗，很好。但有時，當咱們開發某個某塊（好比新增用戶）時，點擊新增用戶按鈕，顯示彈框，不巧的是，在帳號，密碼輸入框中瀏覽器幫咱們填充上了。但這並非咱們想要的。因此，個人有效解決思路以下：

• 設置 <el-input/> 爲只讀模式
• 在 focus 事件中去掉只讀模式

<el-input
  type="text"
  v-model="addData.loginName"
  readonly
  @focus="handleFocusEvent"
/>
methods: {
  // focus 的時候去掉只讀
  handleFocusEvent(event) {
    event.target && event.target.removeAttribute('readonly')
  }
}

使用 <el-scrollbar> 組件

• Element 官方是沒有明確提供這個組件的，可是其源碼 中確實存在。關於如何使用我寫了一個Demo，你能夠狠狠的戳這裏查看示例

父組件監聽子組件生命週期

• 以created爲例子，其餘同樣

<myInput @hook:created="handleChildCreated" :value="value" :class="class_" :style='style' :test='test' @input1="input"/>
 methods: {
    handleChildCreated (e) {
      console.log('子組件created執行完')
    }
  }