Vue 3 中 ref 的神奇世界：从 setup 钩子中掌控元素引用

2023-11-27 19:21:19

序幕：告别 this.$refs，拥抱 ref()

在 Vue.js 的世界中，我们习惯了通过 this.refs 来获取对组件内元素的引用，这种方式在非 setup 钩子中屡试不爽。然而，当我们踏入 setup 钩子的领域，this.refs 却神秘地消失了。这不禁让人困惑：如何在 setup 中掌控元素引用？

登场：ref() API，你的元素引用向导

答案就在 ref() API 中，它是一个神奇的工具，专为 setup 钩子中的元素引用而生。ref() 接受一个可变对象作为参数，每当指向该对象的元素发生变化时，该对象都会被更新。这为我们打开了一扇大门，让我们可以在 setup 中轻松获取元素引用。

初探：一个简单的示例

让我们通过一个简单的示例来揭开 ref() API 的神秘面纱：

import { ref } from 'vue'

export default {
  setup() {
    const myRef = ref(null) // 创建一个可变对象来存储元素引用

    return {
      myRef, // 将 myRef 暴露给模板
    }
  },
  template: `<input ref="myRef" />`, // 在模板中使用 ref() 设置元素引用
}

在这个示例中，我们使用 ref() 创建了一个名为 myRef 的可变对象，并将它暴露给模板。当用户与 input 元素交互时，该可变对象将自动更新，持有 input 元素的引用。

进阶：动态设置 ref

ref() API 还不止于此，它还支持动态设置 ref，让我们可以根据特定条件灵活地绑定元素引用。例如：

import { ref } from 'vue'

export default {
  setup() {
    const showInput = ref(true) // 用于控制 input 元素是否显示

    const myRef = computed(() => {
      return showInput.value ? ref(null) : null // 根据 showInput 的值动态设置 ref
    })

    return {
      myRef,
      showInput,
    }
  },
  template: `<input v-if="showInput" ref="myRef" />`,
}

在上面的示例中，我们根据 showInput 的值动态设置 myRef 的引用。当 showInput 为真时，myRef 将指向 input 元素；当 showInput 为假时，myRef 将被置为 null。

妙用：DOM 操作和响应式交互

掌握了 ref() API 的精髓，我们便能随心所欲地操纵 DOM 元素，并实现响应式的交互体验。例如：

import { ref } from 'vue'

export default {
  setup() {
    const inputRef = ref(null) // 获取 input 元素的引用

    const focusInput = () => {
      inputRef.value?.focus() // 使用 ref().value 访问元素并调用 focus() 方法
    }

    return {
      inputRef,
      focusInput,
    }
  },
  template: `<input ref="inputRef" />`,
}