单向数据流：父组件异步更新 prop 时子组件不更新答案

【问题标题】：One-Way Data Flow: Child component doesn't update when prop is asynchronously updated by parent单向数据流：父组件异步更新 prop 时子组件不更新
【发布时间】：2017-04-27 15:13:48
【问题描述】：

所有道具在子属性和子属性之间形成单向绑定父级：当父级属性更新时，会向下流向孩子，但不是相反。这样可以防止孩子组件避免意外改变父状态，这可能使您的应用程序的数据流更难推理。此外，每父组件更新时间，子组件中的所有道具将使用最新值刷新。 - One-Way Data Flow

Vue2 Component Docs 建议执行以下操作以使用 props 作为初始值：

// via https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

所以在我的代码中我模仿了这些指令here。然而，即使根据 vue-devtools 接收到 prop 值，Note.vue 中的 data() 也不会更新。

使用mounted 或created lifescyle 方法设置值没有成功。

当我使用静态数据时，这似乎工作正常，我如何确保子组件在接收来自远程源的道具时做出反应？

【问题讨论】：

标签： javascript vue.js vue-component vuejs2

【解决方案1】：

当您将initialNote 作为初始值的道具传递时，但我看到initialNote 在getNote 方法中被异步填充，因此在安装组件时它最初不会出现。它会在初始化已经发生的一段时间后填充。

在vue documentation 中给出的示例中，initialCounter 是静态值，它将完美，因为它从一开始就具有相同的值。

【讨论】：

对，我已经观察到了。然而，Vue 不会持续观察/观察数据对象/函数的变化，并使用数据项作为道具将这些变化传播给孩子吗？此外，当我检查 vue-devtools 时，收到了道具，但 Note.vue 中的字段没有更新，如here
@komplexb 是的，vue 监视数据更改并将更改的 props 传播给子组件，但初始化仅在挂载子组件时发生一次，初始值不会更改。如果您想要更改，您可以在 Note 中使用 prop initialNote 本身，而不是本地数据变量。