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，值为空的字符串

接下来是我的业务组件

常见的思路一般是业务组件可以重写父类属性a,

比如我在业务组件中希望我的属性a是 ‘6’

好了  项目运行  进入业务组件 看到控制台打印输出:

确实改写成功了 然而这个时候问题来了

当时我看到extends实现了，我便继续进一步编写我的base基类组件 ctrl+s保存

却发现修改的属性还原了，比如我在base组件仅仅做个如下修改:

ctrl + s保存 看到控制台:

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

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

而且即便是我刷新或者放回首页刷新都依旧打印为空，有时候刷新又可以

猜想到直接导致这个BUG的原因可能是我修改了基类组件后 webpack热重载 导致的

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

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

也就导致base组件的a属性没有得到修改

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