💗💗💗歡迎來到我的博客，你將找到有關如何使用技術解決問題的文章，也會找到某個技術的學習路線。無論你是何種職業，我都希望我的博客對你有所幫助。最后不要忘記訂閱我的博客以獲取最新文章，也歡迎在文章下方留下你的評論和反饋。我期待著與你分享知識、互相學習和建立一個積極的社區。謝謝你的光臨，讓我們一起踏上這個知識之旅！

🍋什么是ref？

ref是Vue提供的一個特殊屬性，用來在模板或組件中給子元素或組件注冊引用信息。這個引用信息可以是一個指向DOM元素或組件實例的引用，通過這個引用，我們可以直接操作對應的DOM元素或組件實例

🍋標簽的ref屬性

準備好初始代碼

<template><div class="person"><h2>饅頭</h2><button @click="showLog">輸出h2這個元素</button>
</div></template><script lang="ts" setup name="Person11">function showLog(){console.log()}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

我們想要輸出h2這個元素，應該怎么做，我們可以選擇使用JS

但是在實際工作中，這樣的做法并不可取，原因是怕沖突（不同組件間id相同）
如果我們想解決一下，使用ref

<template><div class="person"><h2 ref="a">饅頭</h2>  //替換成ref<button @click="showLog">輸出h2這個元素</button>
</div></template><script lang="ts" setup name="Person11">import {ref} from 'vue'let a = ref() //用于存儲ref標記的內容function showLog(){console.log(a.value)}</script><style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}</style>

之前我們都是在html中使用ref，那么是否在組件中也同樣適用呢

<template><button @click="showLog">輸出</button>
<person ref="ren"></person>
</template>
<script lang='ts' setup name="App">import person from './components/person.vue'import {ref} from 'vue'let ren = ref()function showLog(){console.log(ren.value)}
</script>

這樣輸出的就是組件實例

🍋擴展

defineExpose是Vue 3中一個用于向父組件公開組件內部方法或屬性的函數。在Vue 3中，組件的內部狀態和方法默認是私有的，只能在組件內部使用。但是有時候我們希望將一些方法或屬性暴露給父組件使用，這時就可以使用defineExpose。

---

導入方式

import { defineExpose } from 'vue'

注意：需要注意的是，defineExpose只能在script setup中使用，而且需要在script setup中的其他代碼之前調用，以確保能正確暴露組件的屬性和方法。

🍋注意事項

使用ref需要注意以下幾點：

避免在模板中過多使用ref，因為ref會增加組件的耦合度，使得組件難以復用和測試。
如果可能，盡量在mounted生命周期鉤子中使用ref，以確保在DOM元素或組件實例完全渲染后再獲取引用。
在Vue 3中，使用ref獲取組件實例時，需要使用.value來訪問實例

總的來說，ref是一個非常有用的特性，可以幫助我們更方便地操作DOM元素或組件實例。但是在使用時，需要謹慎考慮其對組件的影響，避免濫用

🍋總結

總結一下* 用在普通DOM標簽上，獲取的是DOM節點。用在組件標簽上，獲取的是組件實例對象。

挑戰與創造都是很痛苦的，但是很充實。