Vue: [Vue warn]: $attrs is readonly.[Vue warn]: $listeners is readonly.

[hxfdarling]

Version

2.4.4

Reproduction link

https://github.com/hxfdarling/vue-demo

Steps to reproduce

1. vue引入后作为window下全局变量使用，作为为单一文件引入（如果在同一文件下不会出现该错误）
2. 通过v-model绑定一个自定义checkbox组建
3. 直接在root元素使用该组建会出现[Vue warn]: $attrs is readonly.[Vue warn]: $listeners is readonly.警告
4. 如果通过其他组建间接使用，不会出现该问题
5. 具体代码如https://github.com/hxfdarling/vue-demo 演示所示,点击第一个按钮会报错，点击第二个按钮正常

What is expected?

不要报警告错误

What is actually happening?

vue.esm.js:476 [Vue warn]: $attrs is readonly.

found in

---> <Checkbox> at E:\github\vue-webpack-test\src\components\checkbox.vue
       <Root>
warn @ vue.esm.js:476
(anonymous) @ vue.esm.js:4150
reactiveSetter @ vue.esm.js:989
updateChildComponent @ vue.js:2625
prepatch @ vue.js:3572
patchVnode @ vue.js:5497
updateChildren @ vue.js:5405
patchVnode @ vue.js:5508
patch @ vue.js:5657
Vue._update @ vue.js:2464
updateComponent @ vue.js:2578
get @ vue.js:2919
run @ vue.js:2996
flushSchedulerQueue @ vue.js:2764
(anonymous) @ vue.js:704
nextTickHandler @ vue.js:651
Promise resolved (async)
timerFunc @ vue.js:666
queueNextTick @ vue.js:714
queueWatcher @ vue.js:2851
update @ vue.js:2986
notify @ vue.js:781
reactiveSetter @ vue.js:1003
proxySetter @ vue.js:3111
callback @ VM10180:2
invoker @ vue.esm.js:1821
Vue.$emit @ vue.esm.js:2331
change @ checkbox.vue:49
boundFn @ vue.esm.js:179
invoker @ vue.esm.js:1821
vue.esm.js:476 [Vue warn]: $listeners is readonly.

found in

---> <Checkbox> at E:\github\vue-webpack-test\src\components\checkbox.vue
       <Root>
warn @ vue.esm.js:476
(anonymous) @ vue.esm.js:4153
reactiveSetter @ vue.esm.js:989
updateChildComponent @ vue.js:2626
prepatch @ vue.js:3572
patchVnode @ vue.js:5497
updateChildren @ vue.js:5405
patchVnode @ vue.js:5508
patch @ vue.js:5657
Vue._update @ vue.js:2464
updateComponent @ vue.js:2578
get @ vue.js:2919
run @ vue.js:2996
flushSchedulerQueue @ vue.js:2764
(anonymous) @ vue.js:704
nextTickHandler @ vue.js:651
Promise resolved (async)
timerFunc @ vue.js:666
queueNextTick @ vue.js:714
queueWatcher @ vue.js:2851
update @ vue.js:2986
notify @ vue.js:781
reactiveSetter @ vue.js:1003
proxySetter @ vue.js:3111
callback @ VM10180:2
invoker @ vue.esm.js:1821
Vue.$emit @ vue.esm.js:2331
change @ checkbox.vue:49
boundFn @ vue.esm.js:179
invoker @ vue.esm.js:1821
vue.esm.js:476 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

found in

---> <Checkbox> at E:\github\vue-webpack-test\src\components\checkbox.vue
       <Root>

[hxfdarling]

是由于在开发模式下vue-loader HRM插入了require('vue') 导致vue模块使用的vue与全局vue不是同一个对象

[BoleLee]

是由于在开发模式下vue-loader HRM插入了require('vue') 导致vue模块使用的vue与全局vue不是同一个对象

@hxfdarling 请问你是怎么解决这个矛盾的？

[magixyu]

同问这个问题。谢谢 @hxfdarling

[hxfdarling]

在任何地方使用vue时 import 进来即可

[superliuwr]

@hxfdarling 能具体讲讲是怎么解决的吗？需要停用HRM吗？

[hxfdarling]

不要使用全局变量即可

[Fusseldieb]

Something in english would be great, chinoses...

Like... Those "Issues" are made public so everyone can read them and have their error fixed and explained, but what does this bring if everything is in chinese? The universal language isn't chinese and this is almost egoistic, in my opinion.

I just stumbled upon this and I'm leaving with absolutely no greater knoweledge. I know there is Google Translate, but come on :/

[guohuihot]

这个问题弄了半天还是没一个解决方案

[leafiy]

same issue here... makes me crazy

[guohuihot]

npm ls vue了一下，两个vue，卸载了一个好了

[lhywell]

我是因为在node_modules下有两个版本的vue，然后把包删了，重新npm install的解决了问题。

[luoruiqing]

多谢 @lhywell 同样遇到这个问题, 是因为自己开发多选级联组件的时候, package.json内dependencies依赖到别的版本的vue导致的, 重新发包该组件的时候清空了dependencies, 然后在项目里面删除了node_modules, 重新npm install解决的☺

[leafiy]

在babel配置文件中配置一下，强制使用一个vue

[
      "module-resolver",
      {
        root: ["./"],
        alias: {
          vue: "./node_modules/vue/dist/vue.esm.js",
        }
      }
    ]