Vuejs2 Vue 2.5中的文字对象和属性

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

例如：

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

我知道我可以绕着它玩，但我只是问为什么不行？ 有没有一种巧妙的方法可以让它反应

谢谢大家!

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

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

由于

myProp

值的全流从不通过数据函数，也不通过正常计算函数的返回结果，因此它从不被标记为反应性

虽然Vue标记所有“计算”函数的返回结果可能听起来很奇怪，但除了特殊的呈现函数reactive之外，如果看看Vue的设计思想，即道具输入和事件输出，它实际上是有意义的。与将其标记为反应性相比，这种不标记反应性的做法给了我们一个性能提升

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

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)
}

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’ }}}}}},
        },
    );
},