淺析Ref操作Dom在Vue2.x和Vue3.x的不同
Ref操作Dom為何既易用又有效率？以下這篇文章帶大家聊聊Ref操作，介紹一下Ref取得Dom的本質、其在Vue2.x和Vue3.x的不同等，希望對大家有所幫助！
在開發一個專案之前，我們往往都是先做下需求分析，針對前端而言，就是可以研究或選擇一個基礎元件庫，來提升我們的工作效率。畢竟，對於比較計較時間成本的公司來說，不會給你拿看電視劇玩遊戲的時間去專門開發一個類似日曆的組件。但在市面上的元件庫，並不能都能滿足我們的需求。這時候，我們需要自己手寫元件，來應用在專案中。
而這就是我想說的: 如何設計元件，讓其既能易於應用（或者說減少程式碼量），又能提高擴展性，方便需求變更和後續維護？
可以有很多種方式，而利用Ref操作Dom的特性隨是其中之一，但這個方式卻讓我們在維護和操作Modal、Popup以及頻繁操作Dom顯示和隱藏互動的組件的時候，卻發揮得很大優勢。 【相關推薦：vuejs影片教學、web前端開發】
#就對Ref操作Dom的相關知識點以及應用實例分幾個面向來做下剖析
- Ref取得Dom的本質
- Ref操作Dom在Vue2.x和Vue3.x的不同
- 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的不同
##Vue2.x
#我們只需要在對應的Dom元素或元件加上ref="xx"屬性,然後在Vue物件中使用this.$refs.xx,就可以直接取得到該Dom並操作其方法屬性,<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)
},Vue3.2
在Vue3.2版本使用的方式//普通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>- Vue3 在早期版本（ 3.0.0-beta.21 之前）中對composition api 的支持，只能在元件選項
- setup
函數中使用。而對應式的變數都是透過在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>- 在3.0.0-beta.21 版本中增加了
- <script setup>
的實驗特性。如果使用了，會提示<script setup>還處在實驗特性階段。在3.2.0 版本中移除 - <script setup>
的實驗狀態，從此，宣告<script setup>正式轉正使用，成為框架穩定的特性之一 與元件選項setup函數對比，<script setup>我們只需要寫更少、更簡潔的程式碼，不需要使用return {}暴露變量和方法了，使用元件時不需要主動註冊了，會自動幫你綁定
<script setup>中宣告的變數會自動被加到在該Vue物件的本身this中，如
<script setup> | ##
|---|
