Vue 3 中 Ref 的原理与实现

前端

2023-11-28 08:08:29

大家好，今天我们来聊聊 Vue 3 中的 Ref。Ref 是一个非常重要的概念，它允许我们在模板中访问和修改组件实例上的数据。在本文中，我们将深入探讨 Ref 的工作原理，并学习如何使用它来实现各种场景。

Ref 的原理

Ref 本质上是一个指向组件实例数据的指针。当我们创建 Ref 时，Vue 3 会创建一个指向相应数据的 getter 和 setter。Getter 允许我们访问数据，而 setter 允许我们修改数据。

Ref 的创建

有两种创建 Ref 的方式：

使用 createRef() 函数： 这是最常见的创建 Ref 的方法。它创建一个空的 Ref，并返回一个带有 get 和 set 属性的对象。
使用 ref 选项： 这是在组件选项中创建 Ref 的简便方法。它创建一个 Ref 并自动将其与组件数据中的一个属性关联起来。

Ref 的更新

当 Ref 指向的数据更新时，Vue 3 会自动触发更新。这是通过使用 getter 和 setter 来实现的。当我们访问 getter 时，Vue 3 会检查数据是否已更新，如果已更新，它会触发更新。当我们设置 setter 时，Vue 3 会将新值存储在数据中，并触发更新。

Ref 在组件实例之间共享

有时，我们需要在不同的组件实例之间共享 Ref。这可以通过使用 provide/inject 机制来实现。

示例

让我们看几个使用 Ref 的示例：

访问组件实例数据：

<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

修改组件实例数据：

<template>
  <button @click="incrementCount">+</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const incrementCount = () => {
      count.value++
    }

    return { count, incrementCount }
  }
}
</script>

在组件实例之间共享 Ref：

<template>
  <parent-component ref="parent" />
</template>

<script>
import { ref, provide, inject } from 'vue'

export default {
  setup() {
    const count = ref(0)
    provide('count', count)
  }
}
</script>

<template>
  <div>{{ count }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const count = inject('count')
    return { count }
  }
}
</script>