vuejs2 - Vue 2.5 中的文字对象和属性反应性

Question

为什么绑定到组件属性的文字对象的嵌套字段没有反应和观察？

例子：

<my-comp :my-prop="{ my: { literal: { object: { with: { nested: { field: ‘not reactive’ }}}}}}"></my-prop>

当您在 my-comp 中执行此操作时：

created() {
  console.log(this); // you can see in the Chrome console that nested fields of this.myProp do not get reactive (i.e. no getters)
}

我知道我可以玩它，但我只是问为什么不呢？有没有一种巧妙的方法使它具有反应性？

谢谢！

Answer 1

这是因为“HTML”模板的呈现方式。

当 Vue “编译”你的 html 时，它基本上会创建以下“计算”函数

render(createElement) { /* `createElement` is also known as `h` in the Vue world */
    return createElement('my-comp', {
        props: {
            myProp: { my: { literal: { object: { with: { nested: { field: ‘not reactive’ }}}}}},
        },
    );
},

由于值的完整流程myProp永远不会通过数据函数，也不会通过正常计算函数的返回结果，因此它永远不会被标记为反应性。

虽然 Vue 标记所有“计算”函数的返回结果可能听起来很奇怪，但期待特殊的渲染函数响应式，如果查看 Vue 的设计思想，即 props in 和 events out，这实际上是有道理的。与将其标记为反应性相比，这种不标记反应性给我们带来了性能提升。

如果您仍然需要它是响应式的（因此想要违背 Vue 的核心原则（从而使您的应用程序更难理解）），您可以通过将值存储在组件的数据部分中来做到这一点，或者通过从计算属性返回它。