Question

我想在我的一个Vue文件中有一个小的注册表，并决定使用Vue提供的Vue.observable函数（是的，我可以使用Vuex，但首先我想尝试一下）。现在，当我在创建后将属性添加到注册表中时（当然使用Vue.set），我发现属性的反应性很难预测：

这确实按预期工作：

const state = Vue.observable({fromObservable: ''})
...
computed:
  fromObservable: () => state.fromObservable
...
In mounted:
  state.fromObservable = 'Success'

可悲的是这不起作用。为什么？

const state = Vue.observable({})
...
computed:
  fromObservable: () => state.fromObservable
...
In mounted:
  Vue.set(state, 'fromObservable', 'Success')

嵌套属性按预期工作：

const state = Vue.observable({values: {}})
...
computed:
  fromObservable: () => state.values.fromObservable
...
In mounted:
  Vue.set(state.values, 'fromObservable', 'Success')

如果我立即将值分配给变量，它将无法正常工作。我不知道这是怎么回事：

const state = Vue.observable({values: {}}).values
...
computed:
  fromObservable: () => state.fromObservable
...
In mounted:
  Vue.set(state, 'fromObservable', 'Success')

这里是fiddle的证明。

请向我解释一下，特别是情况2和4的理解方式。

Answer 1

首先，Vue2使用Object.defineProperty使对象具有反应性

可以肯定地说，不是对象本身就是反应性的，它的属性是

第二个重要事实是计算出的属性：

在评估时跟踪反应性依赖性
- 依赖性是函数评估期间访问的任何反应性属性
缓存该值，除非某些反应性相关性已更改，否则不会重新计算

案例2

调用计算时，fromObservable的{{1}}属性不存在
计算的回报state
没有访问任何一个吸气剂！！因此应触发重新计算的依赖项列表为空（换句话说，此计算出的将不再重估）

案例3

undefined getter是在计算属性中访问的，因此是依赖项
当以state.values作为参数调用Vue.set时，它会看到state.values是反应性属性（Vue添加了setter和getter），因此将新属性的添加注册到对象中像改变一样抱着
因此，计算出的属性将在下一次渲染时重新评估

案例4

几乎与情况2类似，因为在计算属性内，没有访问getter且返回值为values
仅在undefined中访问一次getter（并返回本身没有反应的空对象）
从Vue的角度来看，此计算属性是恒定的，因为它没有反应性依赖项

幸运的是，由于使用proxies重写了反应性系统-here是为了使用Vue 3重写了代码-在所有情况下都有效！ / p>

创建后添加属性时，Vue可观察的行为

1 个答案:

案例2

案例3

案例4