vue中使用extends继承父类组件改写data属性问题

记首次开博 

给你们分享最近踩到的一个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>

ctrl + s保存 看到控制台:

这个时候虽然我直接写死的console.log('假如这是我修改的')打印了，也就是意味着个人base组件是加载了的，可是接下来的

console.log(this.a)打印为空 也就是说个人业务组此时此刻并无改写到个人基类中的a属性

并且即使是我刷新或者放回首页刷新都依旧打印为空，有时候刷新又能够

猜测到直接致使这个BUG的缘由多是我修改了基类组件后 webpack热重载 致使的

打开控制台source, 看到在个人本地生成了一个带有哈希值的热重载文件:

明眼人应该看到这里就懂了吧, 热重载只是局部更新个人base组件 并没让个人业务组件重加载，

也就致使base组件的a属性没有获得修改

解决办法就是到webpack的配置文件中禁止使用模块热重载，总之这样其实并不会影响生产上，只是开发的时候注意下就行