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
<code class="html"><template> <input ref="myInput" /> </template></code>
2. JavaScript ref
立即学习“前端免费学习笔记（深入）”；
<code class="js">export default {
setup() {
const myInputRef = ref(null);
return { myInputRef };
},
};</code>获取 ref 值
对于 template ref，可以使用 this.$refs 访问：
<code class="js">const myInputElement = this.$refs.myInput;</code>
对于 JavaScript ref，可以使用 unref() 函数解引用：
<code class="js">const myInputElement = unref(myInputRef);</code>
用例
ref 可用于各种场景：
1. 访问 DOM 元素
<code class="js">const myInputElement = this.$refs.myInput; myInputElement.focus();</code>
2. 访问组件实例
<code class="js">const myChildComponent = this.$refs.myChildComponent; myChildComponent.doSomething();</code>
3. 监听 DOM 事件
<code class="js">const myInputRef = ref(null);
watch(myInputRef, (newValue, oldValue) => {
if (newValue.value !== '') {
// do something
}
});</code>注意点
- ref 的值是不可变的，因此无法直接修改。
- 首次访问 ref 时，其值为
null，直到组件被渲染后才有效。 - 确保使用
unref()函数解引用 JavaScript ref，以获取实际 DOM 元素或组件实例。
