javascript - "$attrs is readonly", "$listeners is readonly", "Avoid mutating a prop directly"

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 配置以另一种方式加载(例如绝对路径与相对路径、common.js 与 esm.js vue 文件, 仅运行时 vue vs 编译器+运行时 vue)

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

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