Vue3响应式基础--熟悉ref，reactive用法及深入理解

作为Vue3的基础，ref和reactive应该被大家所广泛使用

但是请初学者注意这一点，请认真阅读官网文档。

注意，在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包 (有一些注意事项)。

ref（）:

对于reactive的包装，可以持有任何类型的值。它将内部值包装在特殊对象中。

在script下：

ref声明的响应式对象是要通过.value访问

在template下：

ref声明的响应式对象不需要通过.value访问

reactive（）:

reactive（）将使对象本身具有响应性

reactive声明的响应式对象在script下和template下都直接访问，不需要通过.value。

ref解包的注意事项；

在模板渲染上下文中，只有顶级的 ref 属性才会被解包。

在模板渲染上下文中，只有顶级的 ref 属性才会被解包。

在下面的例子中，count 和 object 是顶级属性，但 object.id 不是：

const count = ref(0)
const object = { id: ref(1) }

因此，这个表达式按预期工作：

{{ count + 1 }}

但这个不会：

{{ object.id + 1 }}

渲染的结果将是 [object Object]1，因为在计算表达式时 object.id 没有被解包，仍然是一个 ref 对象。为了解决这个问题，我们可以将 id 解构为一个顶级属性：

const { id } = object

{{ id + 1 }}

现在渲染的结果将是 2。

另一个需要注意的点是，如果 ref 是文本插值的最终计算值 (即 {{ }} 标签)，那么它将被解包，因此以下内容将渲染为 1:

{{ object.id }}

该特性仅仅是文本插值的一个便利特性，等价于 {{ object.id.value }}。

参考：

Vue官网