为啥我看到 Vue 警告：“属性或方法“msg”未在实例上定义，但在渲染期间被引用...”

Posted 2023-02-23

【中文标题】为啥我看到 Vue 警告：“属性或方法“msg”未在实例上定义，但在渲染期间被引用...”

【英文标题】：Why I see Vue warning: "Property or method "msg" is not defined on the instance but referenced during render..."为什么我看到 Vue 警告：“属性或方法“msg”未在实例上定义，但在渲染期间被引用...”

【发布时间】：2020-06-16 09:03:57

【问题描述】：

情况看起来很简单，但原因对我来说绝对不清楚。我正在尝试使用 ES5 为带有遗留代码的项目实现一个 Vue 组件。 Vue 库是 2.6x（也试过 2.5x）。

我有以下 Vue 组件：

window.StoragesPage = Vue.extend(
  name: MyConsts.COMP_STORAGES_PAGE,

  template: '#storages-page-template',

  data: function () 
    return 
      msg: 'aaaaaaaaaa',
      instGid: '',
      instDomain: ''
    ;
  ,
);

它有以下模板：

<script type="x-template" id="storages-page-template">
    <div>  msg   </div>
</script>

它使用以下实例化方式：

Vue.component(MyConsts.COMP_STORAGES_PAGE, window.StoragesPage);

// Init vue root instance
new Vue(
  el: '#my-app'
);

Vue 根实例的标记如下所示：

<div id="my-app">
    <storages-page></storages-page>
</div>

我的组件名称常量如下所示：

...
  COMP_STORAGES_PAGE: 'storages-page',
...

我终于收到了这个 Vue 警告：

vue-2x.js:634 [Vue 警告]：属性或方法“msg”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。 （在根目录中找到）

问题是：

为什么我会看到这个警告？

为什么它包含“found in Root”，但“msg”数据项实际上是在我的 Vue 根子组件中？

为什么之后我看到正确渲染的页面，预​​期输出为“aaaaaa”？

PS：我还仔细检查了页面上只包含一个 Vue 库。

【问题讨论】：

请提供minimal reproducible example。

@Terry 它似乎与这里显示的第一个示例相匹配~vuejs.org/v2/api/#Vue-component

我无法重现这个问题~jsfiddle.net/kyaqvhxu

看起来我无法准备最小的可重现示例，我刚刚在 Codepen 上尝试过，但没有看到任何警告，所以原因可能在我的环境中。 @Terry 我尝试了您的变体，但仍然看到警告，是的，我的原始变体也可以根据 Vue 文档工作。

【参考方案1】：

好的，看来我找到了这种奇怪行为的原因，在 Chrome 调试器中详细检查了 Vue 实例化过程后，我发现我的子 Vue 组件模板在 Vue 应用容器 <div> 标记中呈现，如下所示：

<div id="my-app">
    <storages-page></storages-page>
    <?= $childrenTemplates ?> // <--- this one
</div>

不幸的是，我在问题描述中跳过了这行代码，认为它不是那么重要。这就是警告中提到的 Vue 根组件的原因。所以为了解决这个问题，我只是将子组件模板输出移动到结束 </div> 标记下方：

<div id="my-app">
    <storages-page></storages-page>
</div>
<?= $childrenTemplates ?>