Vue3中ref的用法总结，避免混淆

原创已于 2023-04-23 16:02:19 修改 · 7.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2023-04-14 17:34:47 首次发布

在Vue3中，ref不仅可以处理响应式数据，还能用于访问DOM元素、组件实例以及存储状态管理的值。例如，它可以用来聚焦输入框、调用子组件方法或管理加载状态。

在Vue 3中，ref除了用于处理响应式数据外，在 Vue 3 中 ref 还可以用于访问组件中的 DOM 元素、组件实例以及存储任何需要在组件中进行状态管理的值。下面分别介绍这些用法：

1. 访问 DOM 元素

通过 ref 可以访问到在组件中定义的 DOM 元素，例如：input、div、img 等。可以使用 $refs 属性访问到这些元素。

<template>

  <div>

    <input ref="myInput" type="text">

    <button @click="focusInput">Focus Input</button>

  </div>

</template>



<script>

import { ref } from 'vue'



export default {

  setup() {

    const myInput = ref(null)



    function focusInput() {

      myInput.value.focus()

    }



    return {

      myInput,

      focusInput

    }

  }

}

</script>

2. 访问组件实例

可以使用 ref 访问到组件的实例，以便在父组件中直接调用子组件中暴露的方法或访问子组件中暴露的数据。

<template>

  <div>

    <Child ref="childComponent" />

    <button @click="callChildMethod">Call Child Method</button>

  </div>

</template>



<script>

import Child from './Child.vue'



export default {

  components: {

    Child

  },

  setup() {

    const childComponent = ref(null)



    function callChildMethod() {

      childComponent.value.myMethod()

    }



    return {

      childComponent,

      callChildMethod

    }

  }

}

</script>

4. 存储任何需要在组件中进行状态管理的值

除了用于处理响应式数据，ref 还可以用于存储任何需要在组件中进行状态管理的值，例如：定时器 ID、请求状态等等。

<template>

  <div>

    <p v-if="isLoading">Loading...</p>

    <button @click="fetchData">Fetch Data</button>

  </div>

</template>



<script>

import { ref } from 'vue'



export default {

  setup() {

    const isLoading = ref(false)

    const timerId = ref(null)



    function fetchData() {

      isLoading.value = true



      timerId.value = setTimeout(() => {

        isLoading.value = false

        clearTimeout(timerId.value)

      }, 3000)

    }



    return {

      isLoading,

      fetchData

    }

  }

}

</script>

这些都是 ref 函数在 Vue 3 中的一些用法，除了处理响应式数据之外，它还可以访问 DOM 元素、组件实例以及存储任何需要在组件中进行状态管理的值，使得 Vue 3 变得更加灵活和方便。