記首次開博 

給大家分享最近踩到的一個vue開發中的坑

最近跳槽換了一家公司，技術棧也從Ng4換成了vue.js 2.0版本，使用的vue-cli腳手架

由於是開發的一個後臺管理系統  大部分模組的table都差不太多，那當然是選擇使用繼承的方式來實現 less code,do more things!

查閱vue官方API發現確實也提供了extends解決途徑

當我開發好base基類元件 業務元件中也成功繼承到了基類元件後 專案也按照預期實現了效果

（由於現在在家，公司專案程式碼沒在自己電腦本地，就隨便寫了個todo,方便大家理解）

下面的是我的基類base元件

我在data裡面定義了一個屬性a，值為空的字串

<template>
  <div>
    這是基類元件
    <button @click="onclick">返回首頁</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      a: ''
    }
  },
  created () {
    console.log(this.a)
  },
  methods: {
    onclick () {
      this.$router.push({name: 'home'})
    }
  }
}
</script>
 

常見的思路一般是業務元件可以重寫父類屬性a,

比如我在業務元件中希望我的屬性a是 ‘6’

<script>
import baseC from './base'
export default {
  extends: baseC,
  data () {
    return {
      a: '6'
    }
  },
  created () {
    console.log(this.a)
  },
  methods: {}
}
</script>

確實改寫成功了 然而這個時候問題來了

當時我看到extends實現了，我便繼續進一步編寫我的base基類元件 ctrl+s儲存

卻發現修改的屬性還原了，比如我在base元件僅僅做個如下修改:

<template>
  <div>
    這是基類元件
    <button @click="onclick">返回首頁</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      a: ''
    }
  },
  created () {
    console.log('假如這是我修改的')
    console.log(this.a)
  },
  methods: {
    onclick () {
      this.$router.push({name: 'home'})
    }
  }
}
</script>

這個時候雖然我直接寫死的console.log('假如這是我修改的')列印了，也就是意味著我的base元件是載入了的，但是接下來的

console.log(this.a)列印為空 也就是說我的業務組此時此刻並沒有改寫到我的基類中的a屬性

而且即便是我重新整理或者放回首頁重新整理都依舊列印為空，有時候重新整理又可以

猜想到直接導致這個BUG的原因可能是我修改了基類元件後 webpack熱過載 導致的

開啟控制檯source, 看到在我的本地生成了一個帶有雜湊值的熱過載檔案:

明眼人應該看到這裡就懂了吧, 熱過載只是區域性更新我的base元件 並沒讓我的業務元件重載入，

也就導致base元件的a屬性沒有得到修改

解決辦法就是到webpack的配置檔案中禁止使用模組熱過載，總之這樣其實並不會影響生產上，只是開發的時候注意下就行