在我的设置(Vue3)中,我有一个类方法,它将本地非反应性对象分配给反应性对象的属性。然后,它立即修改本地对象的属性。令人惊讶的是,尽管局部变量本身尚未与 Vue 的反应系统发生反应,但 Vue 观察程序仍能检测到这些变化。
<script setup>
import { reactive, watch } from 'vue';
class MyClass {
data = null;
assignAndUpdateImmediate() {
const local_variable = { name: 'Immediate: initial' };
this.data = local_variable;
// This local variable is not reactive, but changing it is reflected in the watcher
local_variable.name = 'Immediate: updated';
}
}
const reactiveObject = reactive(new MyClass());
watch(() => reactiveObject.data?.name, (newName, oldName) => {
console.log(`WATCHER: "${oldName}" -> "${newName}"`);
});
reactiveObject.assignAndUpdateImmediate();
</script>
<template>
</template>
输出:
WATCHER: "undefined" -> "Immediate: updated"
如果我们在分配反应成员之后和修改局部变量之前引入延迟,则更改不会像预期的那样反映在观察程序中。
输出:
WATCHER: "undefined" -> "Immediate: initial"
为什么在第一个示例中修改非反应性属性看起来是反应性的?
我确实理解分配 到local_variable
会this.data
触发观察器,并且 Vue 使用一些'tick'
-system 来避免不必要的频繁更新,但观察器中的值仍然应该是"Immediate: initial"
。