Vue：确保组件不能修改 props（即使是引用对象）？

Question

我知道vue模型是props的单向数据流。

但是，当 prop 为引用对象时，组件可以直接修改其属性。这是错误的，但vue不会检查它。

希望有一种机制保证组件不能修改props（即使是引用对象），而不是被开发者检查。

例如，我有一个组件

<template>
  <input v-model="obj.text" />
</template>

<script>
export default {
  props: ['obj']
};
</script>

以及使用它的页面

<template>
  <my-template :obj="myobj"></my-template>
</template>

<script>
export default {
  data() {
    myobj: {
      text: "hello";
    }
  }
};
</script>

当 'input' 中的数据发生变化时，myobj.text 会一起变化。这违反了单向数据流。

当然，如答案所示，我可以使用“computed”的“get”和“set”方法。

但我必须注意不要将 'obj.someProperty' 写入任何 'v-model'，但这需要我自己注意。

我希望有一个机制在我犯错时给出提示。

Answer 1

找不到现有的副本，所以这里有一个答案。如果有人能找到，请告诉我，我会将其设为社区 wiki。

---

使用带有 getter 和 setter 的计算属性来表示您的 v-model 值。

getter 从 prop 中获取值，setter 将新值发送给父级。

例如

<input v-model="computedProp">

props: ['referenceObject'],
computed: {
  computedProp: {
    get () {
      return this.referenceObject.someProperty
    },
    set (val) {
      this.$emit('updated', val)
    }
  }
}

在父级中

<SomeComponent :reference-object="refObject" @updated="updateRefObject">

data: () => ({ refObject: { someProperty: 'initial value' } }),
methods: {
  updateRefObject (newVal) {
    this.refObject.someProperty = newVal
  }
}