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

然而在vue3中時沒有$refs這個東西的，因此vue3中通過ref屬性獲取元素就不能按照vue2的方式來獲取
vue3需要借助生命周期方法，原因很簡單，在setup執(zhí)行時，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。這里導(dǎo)入了一個onMounted
當(dāng)界面掛載出來的時候，就會自動執(zhí)行onMounted的回調(diào)函數(shù)，里頭就可以獲取到dom元素

還有一點容易忘記的點 創(chuàng)建的box 要return {box} 導(dǎo)出

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

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。