ref在Vue3中的具体作用和代码示例

在Vue 3中，`ref` 函数的作用是创建一个响应式的数据对象或者获取组件中的元素。在创建响应式数据对象时，`ref` 函数会将基本类型的数据转换成一个包含 `value` 属性的响应式对象，而引用类型的数据则不会进行转换。

代码示例如下：

import { ref } from 'vue'

// 创建一个响应式数据对象
const count = ref(0)

// 访问响应式数据
console.log(count.value) // 输出 0

// 修改响应式数据
count.value++

// 监听响应式数据
watchEffect(() => {
  console.log(count.value)
})

在上面的代码中，我们使用 `ref` 函数创建了一个名为 `count` 的响应式数据对象，并将其初始值设置为0。我们可以通过 `count.value` 访问响应式数据，并通过 `count.value++` 修改响应式数据。我们还可以使用 `watchEffect` 函数监听响应式数据的变化。

除了创建响应式数据对象外，`ref` 函数还可以用来获取组件中的元素。例如，下面的代码演示了如何使用 `ref` 函数获取组件中的输入框元素：

<template>
  <div>
    <input ref="input" type="text" />
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const inputRef = ref(null)

    const handleClick = () => {
      inputRef.value.focus()
    }

    return {
      inputRef,
      handleClick
    }
  }
}
</script>

在上面的代码中，我们使用 `ref` 函数创建了一个名为 `inputRef` 的响应式数据对象，并将其初始值设置为 `null`。然后，在模板中，我们使用 `ref="input"` 将输入框元素赋值给 `inputRef`，并在 `handleClick` 方法中使用 `inputRef.value.focus()` 获取输入框元素并让其获得焦点。