vue.js 3 中 ref 可通过两种方式使用：1. template ref 2. javascript ref。对于 template ref，可使用 this.$refs 访问，对于 javascript ref，可使用 unref() 解引用。ref 可用于访问 dom 元素、组件实例和监听 dom 事件。但注意 ref 的值是不可变的，首次访问时为 null，需使用 unref() 函数解引用 javascript ref 以获取实际 dom 元素或组件实例。

Vue.js 3 中使用 ref

ref 是 Vue.js 中一项强大的工具，可用于获取组件或 HTML 元素的引用。在 Vue.js 3 中，ref 的用法与之前版本略有不同。

语法

在 Vue.js 3 中，ref 可通过两种方式使用：

1. template ref

<template><input ref="myInput"></template>

2. JavaScript ref

立即学习“前端免费学习笔记（深入）”；

export default {
  setup() {
    const myInputRef = ref(null);
    return { myInputRef };
  },
};

获取 ref 值

对于 template ref，可以使用 this.$refs 访问：

const myInputElement = this.$refs.myInput;

对于 JavaScript ref，可以使用 unref() 函数解引用：

const myInputElement = unref(myInputRef);

用例

ref 可用于各种场景：

1. 访问 DOM 元素

const myInputElement = this.$refs.myInput;
myInputElement.focus();

2. 访问组件实例

const myChildComponent = this.$refs.myChildComponent;
myChildComponent.doSomething();

3. 监听 DOM 事件

const myInputRef = ref(null);
watch(myInputRef, (newValue, oldValue) => {
  if (newValue.value !== '') {
    // do something
  }
});

注意点

• ref 的值是不可变的，因此无法直接修改。
• 首次访问 ref 时，其值为 null，直到组件被渲染后才有效。
• 确保使用 unref() 函数解引用 JavaScript ref，以获取实际 DOM 元素或组件实例。