vue3 使用 reactive/ref 在 template/script 中是否需要加 value 的总结「有待验证」

下面的内容来自 chatGPT QA 记录，正确性我需要稍后验证，未完待续...

讨论下面四个问题：

Q: vue3 的 reactive 在 script 里面读写需要加 value 吗？
A: 在Vue 3中，reactive 函数创建的响应式对象在模板中使用时，会自动解包。但是在 script 代码中，你需要使用 .value 来读取或写入属性的值。

例如，假设你有以下的代码：

import { reactive } from 'vue';

const myObject = reactive({
  foo: 'bar',
  count: 0
});

// 在模板中使用时，不需要加 .value
// 例如：{{ myObject.foo }}

但是在 script 部分，你需要使用 .value：

// 在 script 中读取
const valueOfFoo = myObject.foo.value;

// 在 script 中写入
myObject.foo.value = 'new value';

这是因为在模板中，Vue 3会自动解包响应式对象，但在 script 中，你需要显式地访问 .value 来获取或设置属性的值。这是为了提醒开发者在 script 中操作响应式对象时需要注意。

Q: vue3 的 ref 在 script 里面读写需要加 value 吗？
A: 在 Vue 3 中，ref 创建的响应式对象在模板中使用时会自动解包，但在 script 代码中，你需要使用 .value 来读取或写入 ref 对象的值。

例如，假设你有以下的代码：

import { ref } from 'vue';

const myValue = ref('Hello');

// 在模板中使用时，不需要加 .value
// 例如：{{ myValue }}

但是在 script 部分，你需要使用 .value：

// 在 script 中读取
const valueOfMyValue = myValue.value;

// 在 script 中写入
myValue.value = 'New Value';

这是因为在模板中，Vue 3 会自动解包 ref 对象，但在 script 中，你需要显式地访问 .value 来获取或设置 ref 对象的值。这是为了提醒开发者在 script 中操作 ref 对象时需要注意。