在 Vue 3 中，ref 和 refs 是與響應(yīng)式數(shù)據(jù)相關(guān)的概念，用于處理組件中的數(shù)據(jù)和 DOM 元素谬盐。
- ref:
ref 是一個函數(shù)，用于創(chuàng)建響應(yīng)式對象诚些。它接收一個參數(shù)飞傀，該參數(shù)可以是任意 JavaScript 數(shù)據(jù)類型皇型，然后返回一個具有 value 屬性的對象。這個對象是響應(yīng)式的砸烦，當(dāng) value 屬性發(fā)生變化時弃鸦，與之相關(guān)的視圖會被更新。
import { ref } from 'vue';
// 創(chuàng)建一個 ref
const myValue = ref('Hello');
// 獲取 ref 的值
console.log(myValue.value); // 輸出 'Hello'
// 修改 ref 的值
myValue.value = 'Vue 3 is awesome!';
- refs:
refs 是一個對象幢痘，用于存儲組件中所有帶有 ref 特性的 DOM 元素或子組件的引用唬格。每個引用的名稱對應(yīng)于 ref 特性的值。
<template>
<div>
<!-- 使用 ref 指定引用名稱 -->
<input ref="myInput" />
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
// 創(chuàng)建一個 ref 來存儲 input 元素的引用
const myInput = ref(null);
// 在組件掛載后颜说，聚焦 input 元素
onMounted(() => {
myInput.value.focus();
});
// 提供給模板的方法购岗，用于聚焦 input 元素
const focusInput = () => {
myInput.value.focus();
};
return {
myInput,
focusInput
};
}
}
</script>
