Ref操作Dom為何既易用又有效率？以下這篇文章帶大家聊聊Ref操作，介紹一下Ref取得Dom的本質、其在Vue2.x和Vue3.x的不同等，希望對大家有所幫助！
在開發一個專案之前，我們往往都是先做下需求分析，針對前端而言，就是可以研究或選擇一個基礎元件庫，來提升我們的工作效率。畢竟，對於比較計較時間成本的公司來說，不會給你拿看電視劇玩遊戲的時間去專門開發一個類似日曆的組件。但在市面上的元件庫，並不能都能滿足我們的需求。這時候，我們需要自己手寫元件，來應用在專案中。
而這就是我想說的: 如何設計元件，讓其既能易於應用（或者說減少程式碼量），又能提高擴展性，方便需求變更和後續維護？
可以有很多種方式，而利用Ref操作Dom的特性隨是其中之一，但這個方式卻讓我們在維護和操作Modal、Popup以及頻繁操作Dom顯示和隱藏互動的組件的時候，卻發揮得很大優勢。 【相關推薦：vuejs影片教學、web前端開發】
#就對Ref操作Dom的相關知識點以及應用實例分幾個面向來做下剖析
Ref取得Dom的本質
Vue2.x中Vue的對象屬性$refs，其實就是所有註冊過的ref的一個集合，而ref對應著template模版中，不同組件或普通Dom元素上關聯的ref="xx"; 源碼中ref的實際獲取方式也是通過原生方式getElementById而得到的Dom節點；可以說ref是document.getElementById的語法糖。 vue3的ref延續了vue2的用法，也增加了一個作用就是創建響應式資料
也許有人會問了，既然ref和getElementById都能取得到Dom，那麼在項目開發中，我選擇哪一種方式都沒什麼差別呢？
關於這個問題，經過數據表明，$refs相對document.getElementById的方法，會減少獲取dom節點的消耗；而具體原因，等下一篇文章再詳細探討。
Ref運算Dom在Vue2.x和Vue3.x的不同
<user-and-dep-tree-select-modal ref="avaUserTreeSelect" title="選擇可見範圍" :project-id="currentProjectId" :visible.sync="avaUserModalVisible" @ok="editAvailableUser" /> 或者 <div class="user" ref="user">dd</div>
// $refs
showManagerModal () {
this.$refs.avaUserTreeSelect.showModal(this.form.managers)
console.log(this.$refs.user.text)
},//普通Dom <div class="user" ref="user"></div> //组件 <batch-adjust-department-modal ref="batchAdjustDepartmentRef" />
<script setup>
import { ref } from 'vue';
// modal调整部门弹层Dom
const batchAdjustDepartmentRef = ref(null);
const user = ref(null);
</script> 函數中使用。而對應式的變數都是透過在setup()方法中return {寫入需要在模版中使用的變數或方法}<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'HelloWorld',
setup(props, ctx) {
const count = ref(0)
function add() {
count.value++
}
// 使用return {} 把变量、方法暴露给模板
return {
count,
add,
}
},
})
</script> 的實驗特性。如果使用了，會提示 <script setup> 還處在實驗特性階段。 的實驗狀態，從此，宣告<script setup> 正式轉正使用，成為框架穩定的特性之一
與元件選項setup 函數對比， <script setup> 我們只需要寫更少、更簡潔的程式碼，不需要使用return {} 暴露變量和方法了，使用元件時不需要主動註冊了，會自動幫你綁定<script setup>中宣告的變數會自動被加到在該Vue物件的本身this中，如
<script setup> | ##
|---|
