当 VueJS prop 作为方法的参数时，为什么它不会响应式更新？

Question

我的这个组件有两个文本字段和两个表达式，它们的计算结果应该是相同的。

<template>
  <div>
    {{ value.flange?value.circle.diameter:413 }}
    {{ get(value, 'circle.diameter') }}
  </div>
</template>

<script>
import _ from "lodash/fp"

export default {
  name: "MyComponent",
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    get (obj, path) {
      return _.get(obj, path)
    },
  },
}
</script>

这是我试图防止我的页面在属性未定义 this.value 的短暂瞬间崩溃。我更喜欢使用 lodash/fp 的 _.get 函数，因为对于更深层次的嵌套对象，它的可读性更高，而且不那么乏味。

但是，当我加载此页面时，我看到了 413 的短暂闪烁，但什么也没有，这是预料之中的。由于 413 是第一个表达式的占位符值，第二个应该是未定义的。然后，当 value 获得更新时，413 会迅速更改为 value.circle.diameter，这是应该的，但是包裹在 get 中的那个永远不会更新。

为什么方法调用会阻止传播？我通常应该如何防止我的深层嵌套对象在未定义值时在属性访问时崩溃？

注意：我不想在对象为 null 时阻止页面呈现，例如，div 上的 v-if="value"。这是因为我希望能够编辑值 {} 并在用户编辑时构建该结构。

Answer 1

这是因为属性是反应性的而函数调用不是。但是，您可以使用计算属性实现此目的：

<template>
  <div>
    {{ value.flange?value.circle.diameter:413 }}
    {{ diameter }}
  </div>
</template>

<script>
import _ from "lodash/fp"

export default {
  name: "MyComponent",
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    diameter: function () {
      return _.get(this.value, 'circle.diameter');
    }
  }
}
</script>

当 VueJS prop 作为方法的参数时，为什么它不会响应式更新？

Why doesn't a VueJS prop reactively update when it's an argument to a method?

vue.js

vue-component

vue-props