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

这是因为＆＃34; HTML＆＃34;模板被渲染。

当Vue＆＃34;编译＆＃34;你的HTML，它基本上创建了以下＆＃34;计算＆＃34;功能

{
  "rules": {         
    ".write": true,
     "event":{
       ".read": "query.orderByChild == 'participants/'+auth.uid+'/userKey' && query.equalTo == auth.uid"      
     }
  }
}

由于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’ }}}}}}, }, ); },的值的完整流量从不通过数据函数，也没有通过普通计算函数的返回结果，因此它永远不会被标记为反应性。

虽然Vue标记所有＆＃34;计算＆＃34;的返回结果可能听起来很奇怪。函数，期望特殊的渲染函数反应，它实际上是有道理的，如果看看Vue的设计理念，即道具和事件。与标记反应性相比，这不标记反应性使我们在这里获得性能提升。

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

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

1 个答案: