一文搞懂Vue3中Ref和Reactive的奥妙,让你成为Vue3高手

前端

2022-11-09 21:40:37

在 Vue 3 中掌握 Ref 和 Reactive 的奥秘，成为 Vue 大师

响应式数据在 Vue 3 中的秘密武器

在 Vue 3 中，响应式数据是赋予应用程序生命力的核心元素。它使数据能够随着状态的变化而动态更新，从而为构建高效、动态的网络应用程序奠定了基础。

Ref 和 Reactive：理解异同

Vue 3 提供了多种创建响应式数据的方式，其中 Ref 和 Reactive 是最常用的。了解它们的异同对于有效使用至关重要。

相同点：

Ref 和 Reactive 都用于定义响应式数据，允许数据根据状态的变化动态更新。
两者都基于 ES6 的 Proxy 对象实现。

不同点：

Ref 用于引用 DOM 元素或组件实例，而 Reactive 用于引用普通 JavaScript 对象。
Ref 返回一个可变对象，而 Reactive 返回一个不可变对象。
Ref 可以使用 .value 访问和修改对象，而 Reactive 只能通过解构访问和修改对象。
Ref 可以与 v-model 指令一起使用，而 Reactive 则不能。

何时使用 Ref

引用 DOM 元素或组件实例时。
在组件之间传递数据时。
在组件内部访问子组件时。

何时使用 Reactive

引用普通 JavaScript 对象时。
在组件内部创建响应式对象时。
在组件内部修改响应式对象时。

深入理解：一个综合示例

考虑以下示例，其中我们使用 Ref 引用 DOM 元素并使用 Reactive 定义响应式对象：

<template>
  <div id="app">
    <input ref="input" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  setup() {
    const input = ref(null)
    const message = reactive({
      value: 'Hello, world!'
    })

    return {
      input,
      message
    }
  }
}
</script>