"$ attrs是readonly","$ listeners是readonly","避免直接改变道具"

Question

我是Vue的新手.我正在尝试开发一个聊天应用程序,其中好友列表将显示在左侧菜单上,聊天框将显示在正文中.我正在使用ajax调用加载好友列表并根据好友ID路由到聊天框.这是代码示例.

<div class="chat-container clearfix" id="chat">
    <div class="people-list" id="people-list">
        <chatlist-component></chatlist-component>
    </div>

    <div class="chat">
       <router-view></router-view>
    </div>
</div> 

聊天列表组件将从服务器加载好友列表.这是我的app.js文件;

Vue.use(VueRouter)

const router = new VueRouter({
  routes,
  linkActiveClass: "active"
});


    import ChatComponent from './components/ChatComponent';
    const routes = [
      { path: '/chat/:id/:name', component: ChatComponent , name: 'chat'}
    ];
    Vue.component('chatlist-component', require('./components/ChatlistComponent.vue'));

    const app = new Vue({
        el: '#chat',
        router
    });

和聊天列表组件模板代码

<li class="clearfix" v-for="user in users">
                <img :src="baseUrl+'/img/default_image.jpeg'" alt="avatar" class="chat-avatar rounded-circle" />
                <router-link class="about" :to="{ name: 'chat', params: { id: user.id, name:user.name }}">
                    <div class="name">{{user.name}}</div>
                    <div class="status">
                        <i class="fa fa-circle online"></i> online
                    </div>
                </router-link>

            </li>

它工作正常,直到我切换到另一个用户.当我点击聊天列表组件中的任何路由器列表时,它工作正常,但会向控制台抛出以下错误.

app.js:19302 [Vue warn]: $attrs is readonly.

found in

---> <RouterLink>
       <ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
         <Root>

app.js:19302 [Vue warn]: $listeners is readonly.

found in

---> <RouterLink>
       <ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
         <Root>

app.js:19302 [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: "to"

提前致谢

Answer 1

首先,这些错误仅出现在非生产版本中,但是它们表明在生产发布之前应该解决的问题.

如果加载了多个Vue实例,则会显示$ attrs,$ listeners和其他警告.据我了解,这通常可能是由于以下原因:

• 它是由webpack加载/打包到bundle中的,也是外部加载的(不是通过webpack)
• 它是由你所包含的东西(例如vuetify,vue-test-utils,vue-cli-electron-builder)以及另一种方式加载你的webpack(例如绝对vs相对路径,common.js vs esm.js vue)文件,仅运行时vue与编译器+运行时vue)

如果单击该行(上面的输出中是app.js:19302)并在消息输出的地方放置一个断点,您可以看到堆栈回溯中的模块列表,看是否有多个路径到Vue列出.例如,看到前三个模块下面有不同的路径(但都是Vue的一部分): 如果您看到Vue以两种或更多种方式显示,则表明加载了多个Vue实例.Vue仅支持单个实例,如果加载了多个实例,则cab会生成这些错误消息.

上面列出的问题有几个链接,Vuetify问题是我提交的问题.在那种情况下,Vuetify需要Vue并且加载方式与我不同.通常,修复是检查您的webpack配置指定(或不是)Vue,并尝试使其与包含其他副本的方式匹配(例如绝对与相对路径,或打包与外部).

Answer 2

这个错误发生在我身上，因为我在项目中使用了 Git 子模块，并且有以下文件夹：

• ./node_modules- 这是主要项目。这些node_modules中安装了vue。
• ./my_git_submodules/vue_design_system/node_modules- 提供基本组件的设计系统（也使用vue）。这里也安装了vue！！

所以因为两者：

• ./node_modules/vue和
• ./my_git_submodules/vue_design_system/node_modules/vue

存在，运行npm run serve（vue-cli-service build在下面）构建了两个 Vue 实例。这是一个非常令人讨厌的问题，因为它在某些情况下破坏了反应性（即，您单击按钮但没有任何反应 - 您只是收到 $listeners readonly 错误）

快速修复：
删除子文件夹（vue_design_system）中的node_modules并运行npm runserve对我有用。

长期修复：
您可能需要通过添加规则来使 Webpack 忽略嵌套的 node_modules 文件夹vue.config.js