在vue2.x中，可以通過給元素添加ref='xxx'屬性，然后在代碼中通過this.$refs.xxx獲取到對應的元素

然而在vue3中時沒有$refs這個東西的，因此vue3中通過ref屬性獲取元素就不能按照vue2的方式來獲取
vue3需要借助生命周期方法，原因很簡單，在setup執行時，template中的元素還沒掛載到頁面上，所以必須在mounted之后才能獲取到元素。

?

<template><div ref='box'>I am DIV</div> </template> <script> import {ref,onMounted} export default{setup(){let box = ref(null);onMounted(()=>{console.log(box.value)});return {box}} } </script>

如上代碼，vue3中，所有生命周期方法都抽離出去了，需要用時直接import。這里導入了一個onMounted
當界面掛載出來的時候，就會自動執行onMounted的回調函數，里頭就可以獲取到dom元素

還有一點容易忘記的點 創建的box 要return {box} 導出

小結
1.在compositionAPI中如何使用生命周期函數？
需要用到哪個生命周期函數，就將對應函數的import進來，接著在setup中調用即可
2.vue3如何通過ref屬性獲取界面上的元素?
在template中的寫法跟vue2一樣，給元素添加個ref='xxx'
在setup中，先創建一個響應式數據，并且要把響應式數據暴露出去
當元素被創建出來的適合，就會給對應的響應數據賦值
當響應式數據被賦值之后，就可以利用生命周期方法，在生命周期方法中獲取對應的響應式數據，即DOM元素

以上就是vue3如何通過ref屬性獲取元素基本過程！

?

總結

以上是生活随笔為你收集整理的vue3.x通过ref属性获取元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。