Vue.js中v-for循环内动态传递prop给组件无法渲染的问题排查与解决

我刚碰到过几乎一模一样的问题，分享下我的排查和解决过程：

问题复现 #

我在Vue组件的data选项里初始化了一个空数组sheets，点击按钮会往数组里push新元素：

data() {
  return {
    sheets: []
  };
}

然后在模板里用v-for遍历这个数组，渲染自定义的Card组件并传入数据：

<div id="sheets">
  <template v-for="c in sheets">
    <Card :info="c"/>
  </template>
</div>

结果就很诡异——不管数组里有多少元素，Card组件一个都不渲染，控制台也没任何错误提示。但换成用普通的<span>渲染数据，就完全正常：

<div id="sheets">
  <template v-for="c in sheets">
    <span>{{c}}</span>
  </template>
</div>

问题根源排查 #

折腾了半天，最后发现问题出在Card组件内部：我在组件的created()钩子函数里对传入的info prop做了一些数据处理操作。

为什么这会导致组件不渲染呢？因为created钩子执行时，组件的DOM还没挂载完成，如果在这个阶段对prop数据的操作涉及到依赖DOM的逻辑，或者操作过程中意外干扰了组件的初始化状态，就会让组件无法完成渲染，但又不会触发明显的报错（Vue在这个阶段的某些隐性错误不会直接打在控制台）。

解决办法 #

把Card组件里created()钩子中处理info prop的代码，迁移到mounted()钩子函数里就搞定了！

因为mounted钩子执行时，组件已经完成了DOM挂载，此时再处理传入的prop数据，不会影响组件的正常渲染流程，v-for就能正确渲染出每个Card组件了。

内容的提问来源于stack exchange，提问作者Desk