在组件生命周期的哪个阶段，prop 被注入到组件中？答案

【问题标题】：At what point in the component lifecycle does a prop get injected into a component?在组件生命周期的哪个阶段，prop 被注入到组件中？
【发布时间】：2019-03-17 14:08:28
【问题描述】：

我有一个父组件正在传递一个数组，我们称它为包含一堆东西的“桶”到一个子组件。

在我的父组件中，我有以下内容：

<child-component 
  :bucket=bucket
></childcomponent>

在我的子组件中，我有一个 props 部分，它接受一个名为 bucket 的 prop，并将它定义为一个数组，如下所示：

props: {
  bucket: Array
}

现在在我的子组件的挂载部分，我想拿这桶东西，用它做点什么。但是，由于某种原因，它显示为空。所以当我在我的子组件中这样做时......

mounted() {
  console.log(this.bucket.length)
}

... 我得到一个 0。当我检查 Vue 开发工具时，我可以看到 Child 组件的 props 部分的存储桶数组中有项目。此外，如果在控制台中，子组件设置为 $vm0，当我键入 $vm0.bucket.length 时，我会得到正确的大小。

到底是什么！？ 在 Child 组件中调用 mount 时，prop 还没有注入吗？如果是这样，这实际上是什么时候发生的？我该如何解决这个问题？超级困惑。

谢谢！

【问题讨论】：

在 created() 上试一试
我尝试@Badgy 的第一件事。没有任何区别。
属性在created() 生命周期挂钩中可用。很可能您的父组件最初为子组件提供了一个空数组，然后在稍后更新其数据。
这绝对是可能的。如果是这样，一旦更新道具，我应该如何解决它以运行特定方法？我认为当数组的值更新时，框架的反应性质会自动更新层次结构中的后续值。
您的父组件是否使用空数组([]) 进行初始化，然后在初始化后向其推送内容？

标签： vue.js

【解决方案1】：

尝试添加指令 v-if

<child-component :bucket="bucket" v-if="bucket.length"></childcomponent>

如果您这次可以在组件上安装 this.bucket.length，也许@Stephen Thomas 是对的。

【讨论】：

这行得通，而且是解决方案。基本上，发生的事情是它在调用组件时传递了一个空数组（数组的初始状态），并且没有根据推送更新数组。但是，通过添加 v-if="bucket.length > 0" 规定，在存储桶被填充之前它不会调用组件。

【解决方案2】：

正如您在 cmets 中所说，您正在将新项目推送到 bucket 数组。

您应该使用新项目创建一个新数组，而不是将项目推入数组，例如：

this.bucket = [...this.bucket, newItem];

当值改变时，Vue 反应性起作用，将新项目推入数组不会改变变量的值。

当你将一个对象或数组赋予一个变量时，它是给变量的内存地址，所以改变它的内部属性或推送新项目不会改变它的内存地址。

【讨论】：

这是指导我找到正确解决方案的真正有价值的信息！谢谢！