vue3中的ref()详解

那我就来详细讲解一下"vue3中的ref()详解"的攻略。

简介

ref函数是Vue 3中的一个响应式API，它不仅可以用来创建响应式数据，还可以用来在模板或JSX中访问元素和组件。

创建响应式数据

在Vue.js 2.X版本中，创建响应式数据需要用到 Vue 对象的 data 选项，通常需要在组件的 data 函数中返回一个对象。

而在Vue.js 3.0版本中，可以通过ref()函数直接将变量转换为响应式数据。ref()接受一个参数，它可以是任何类型的JavaScript对象，如数字，字符串，数组等。

import { reactive, ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    count.value++;

    return {
      count
    }
  }
}

在上面的示例中，我们使用了ref()函数来创建一个名为count的响应式数据。我们可以通过访问count.value来获取或设置count的值。

ref()函数还有一个常见的使用场景是用于绑定input、textarea等表单元素，这将会在下面的示例中介绍。

访问元素和组件

除了用于创建响应式数据，ref()函数还可以用于访问DOM元素或组件实例。在Vue 2.X版本中，访问DOM元素通常需要使用Vue.directive，而在Vue 3.0版本中，可以直接使用ref()函数。

<template>
  <div>
    <h1 ref="titleRef">Hello World</h1>
    <button @click="onClick">Click Me</button>
  </div>
</template>

import { ref } from 'vue';

export default {
  setup() {
    const titleRef = ref(null);

    const onClick = () => {
      console.log(titleRef.value.textContent);
    }

    return {
      titleRef,
      onClick
    }
  }
}

在上面的示例中，我们使用 ref() 函数来创建一个名为titleRef的引用。在模板中，我们可以通过ref指令将DOM元素的引用绑定到titleRef上。而在onClick函数中，我们可以通过titleRef.value来访问DOM元素的textContent属性。

与访问DOM元素类似，可以通过ref()函数来访问组件实例。在下面的示例中，我们将会创建一个组件并使用ref()函数访问它的属性和方法。

<template>
  <div>
    <my-component ref="myComponentRef"></my-component>
    <button @click="onClick">Click Me</button>
  </div>
</template>

import MyComponent from './MyComponent.vue';
import { ref } from 'vue';

export default {
  components: {
    MyComponent
  },

  setup() {
    const myComponentRef = ref(null);

    const onClick = () => {
      console.log(myComponentRef.value.foo());
    }

    return {
        myComponentRef,
        onClick
    }
  }
}

在上面的示例中，我们将MyComponent组件通过ref指令绑定到名为myComponentRef的引用上。我们可以通过访问myComponentRef.value来获取MyComponent组件实例的属性和方法。