shallowReactive未按预期工作？Vue3新手的响应性困惑

先给你掰明白：shallowReactive 不是不让你改嵌套属性的值，它只是不对嵌套对象做响应式转换。

你代码里点按钮后count2变了，是两个原因凑出来的：

1. 不管是不是响应式对象，直接改它的属性值本身肯定会变，shallowReactive 管的是“改了之后会不会触发视图更新”，不是“能不能改值”；
2. 你每次点按钮都同时改了根级的count1，这货是响应式的，它一变就会让组件重新渲染，这时候模板会重新读一遍count2的最新值，所以你看到视图里count2也跟着变了，其实不是count2自己触发的更新。

要验证shallowReactive对嵌套对象的真实作用，你可以改下代码，只改count2不动count1：

<script setup>
import { shallowReactive } from 'vue'

const test = shallowReactive({
  count1: 0,
  nested: {
    count2: 0
  }
})
const addCount2 = () => {
  test.nested.count2++
}
</script>

<template>
  <button @click="addCount2">只加count2</button>
  <div>{{ test.count1 }}</div>
  <div>{{ test.nested.count2 }}</div>
</template>

这时候点按钮，你去控制台打印test.nested.count2会发现数值确实在涨，但页面上的count2不会变——因为nested不是响应式对象，它的属性变化不会触发组件重新渲染。

最后再总结下shallowReactive的核心特性：

• 根级属性是响应式的，改了就触发视图更新；
• 嵌套对象不会被转成响应式，改它的属性不会单独触发更新；
• 嵌套属性的值随便改，只是改了之后不会自动同步到视图上，除非有其他响应式属性的变化带动组件重新渲染。

内容的提问来源于stack exchange，提问作者Crazy Cheese