为什么 VueJS 道具在作为方法的参数时不响应更新？

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>