为什么shallowReactive不能像预期的那样工作?

Question

我是vue3的新手，对shallowReactive有一些困惑。

只有根级属性对浅响应对象是响应的。

但是当我点击添加按钮时，count2的值仍然会改变:

<script setup>
import { shallowReactive } from 'vue'
const test = shallowReactive({
count1: 0,
nested: {
count2: 0
}
})
const add = () => {
test.count1++
test.nested.count2++
}
</script>
<template>
<button @click="add">+</button>
<div>{{ test.count1 }}</div>
<div>{{ test.nested.count2 }}</div>
</template>

Answer 1

当您修改shallowReactive内嵌套的内容时，并不意味着不执行突变。它只意味着Vue没有被告知:你需要检查M(模型)和V(视图/模板/DOM)之间的差异now.

因为您还在同一函数中更改test.count1，因此该组件得到diff-ed。微分方程不关心什么是反应物。它只查找M和v之间的差异，如果找到，则更新它们。

让我们为嵌套和非嵌套的道具分别创建函数。正如您所看到的，只有当非嵌套的prop被更改时，V才会更新。此时，整个视图(模板)将根据model进行检查和更新:

const { createApp, shallowReactive } = Vue;
createApp({
setup() {
const test = shallowReactive({
count1: 0,
nested: {
count2: 0
}
})
const add = () => {
test.count1++
}
const addWithoutUpdate = () => {
test.nested.count2++;
}
return { test, add, addWithoutUpdate }
}
}).mount('#app')

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js"></script>
<div id="app">
<button @click="add">+</button>
<button @click="addWithoutUpdate">Only add to nested</button>
<div>{{ test.count1 }}</div>
<div>{{ test.nested.count2 }}</div>
</div>

---

换句话说，shallowReactive不会冻结嵌套的对象。它们可以变异。但是Vue只会在它实际观察的内容发生变化时才会diff模板。可能是这个浅层引用的顶层，或者其他一些完全不相关的反应变量。