在 Vue 3 中使用 reactive 的原语反应性

Question

根据文档，使用 reactive 包装器时原语不应变为反应式，这就是为什么在这种情况下我们应该使用 ref。同样的情况是当我们想要重新分配整个对象而不是改变它时。

我的问题是，为什么在下面的代码片段中，当我们取消对注释行的注释时，counter2 和 state2.counter 开始正常工作？

<script setup>
import { ref, reactive } from 'vue';
  
let counter1 = ref(0);
let counter2 = reactive(0);
  
const increment = () => { 
  // counter1.value++;
  counter2++;
}
</script>

<template>
  <h3>counter1 {{ counter1 }}</h3>
  <h3>counter2 {{ counter2 }}</h3>
  <button @click="increment">increment</button>
</template>

游乐场：link

<script setup>
import { ref, reactive } from 'vue';
  
let state1 = ref({ counter: 0 });
let state2 = reactive({ counter: 0 });
  
const increment = () => { 
  // state1.value = { counter: state1.value.counter + 1 };
  state2 = { counter: state2.counter + 1 };
}
</script>

<template>
  <h3>counter1 {{ state1.counter }}</h3>
  <h3>counter2 {{ state2.counter }}</h3>
  <button @click="increment">increment</button>
</template>

游乐场：link

Answer 1

您应该坚持使用 ref 以具有响应式类型，甚至指定它，因为只为计数器创建对象毫无意义。您可以使用 const counter = ref<int>(0)，因为您在内部处理值时不必使用 let，在脚本中访问时只需使用 counter.value，在您中使用 HTML {{ counter }}。使用 ref 你可以创建一个反应性原始值，同时使用反应性来创建反应性对象，它是数据的替代品。因此，只需使用 ref，因为它几乎可以用于您甚至可以创建自己的类型并指定它们的所有内容。此外，当使用反应式工作时，您不能交换完整的对象，并且它不能用于另一方面 ref 唯一的缺点是 .value 这可能很烦人，但最终，它是值得的。

Answer 2

Vue 检测到 counter1 和 re-renders 整个组件 的突变，其中包括更新的 counter2 值。由于 counter1 的更改导致 re-render，您会看到更新后的 counter2 值。单独改变 counter2 不会触发渲染，因为它不是反应性的。

在 Vue 3 中使用 reactive 的原语反应性

Reactivity of primitives using reactive in Vue 3

javascript

ref

vue.js

reactive