vue中$refs的三種用法解讀

更新時間：2023年01月23日 12:19:40 作者：奇奇怪怪.*

這篇文章主要介紹了vue中$refs的三種用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue $refs的三種用法

我們都知道，在vue2中獲取DOM元素，可以直接在元素上綁定ref屬性，然后獲取到DOM元素的屬性值，這種方法在vue3 中仍然可以使用，但也會有一些問題。

下面就介紹$refs的三種用法：

1、vue2中

在vue2中，我們可以直接使用ref獲取元素，也就是直接在元素上綁定ref屬性，在直接使用this.$refs[‘自定義屬性名’] 就能直接獲取。

但是這樣也是有一定風險的。因為ref綁定的在元素上，所以當元素沒有進行渲染時，是不能通過ref獲取到元素的。

<template>
? <div>
? ? <div ref="btn">我是一個按鈕</div>
? </div>
</template>
?
<script>
?
export default {
? name: 'App',
? created() {
? ? //直接使用this.$refs獲取DOM元素
? ? console.log(this.$refs.btn); // undefined
? ? this.$nextTick(() => {
?? ??? ?console.log(this.$refs.btn) ?//獲取到正確元素
?? ?})
? },
? mounted() {
?? ?console.log(this.$refs.btn); //獲取到正確元素
? }
}
</script>

需要注意的是，在于vue2中使用這種方法獲取v-for的元素時，獲取到的是一個數組。

<template>
? <div>
? ? <div ref="btn" v-for="(item , index) in 3" :key="index">我是一個按鈕</div>
? </div>
</template>
?
<script>
?
export default {
? name: 'App',
? mounted() {
? ? //獲取到的是一個元素數組?
?? ?console.log(this.$refs.btn);?
? }
}
</script>

2、vue3中

在一般情況下，vue2的獲取元素的方法在vue3也完全適用。

但是，有時候可能會遇到無法獲取這個節(jié)點，原因是生命周期的問題，在vue3中原來的created沒有了，而 setup 充當了原來的 created。

所以在 setup 的時候，dom元素還沒有被創(chuàng)建，只有setup完畢了之后HTML才能構建，這時才能真正訪問到value值，所以自然就無法獲取到dom節(jié)點，要想解決這個問題，就要配合鉤子函數 onMounted ，在dom掛載完畢后再進行獲取。

<template>
?? ?<div id="ref">
? ? ? ? <!--在元素上用 ref="butRef" 綁定-->
?? ??? ?<button type="button" ref="butRef" >按鈕元素</button>
?? ?</div>
</template>
?
<script>
? ? //引入ref
?? ?import {ref, onMounted} from 'vue'
?? ?export default {
?? ??? ?setup() {
?
? ? ? ? ? ? //需要先定義butRef
?? ??? ??? ?let butRef = ref(null)
? ? ? ? ? ? onMounted(()=>{
? ? ? ? ? ? ? //使用的時候為 butRef.value（需要加點value獲取DOM元素值）
?? ??? ??? ? ?console.log(butRef.value);
? ? ? ? ? ? })
?? ??? ??? ?return {
?? ??? ??? ??? ?butRef
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

3、vue3的組合API（composition-api）

最后一種方法就是從上下文 Ctx（context）中解構構出 refs，雖然這里refs可能會提示已經被棄用，但是在這里仍然是可以用的。

<template>
?? ?<div id="ref">
?? ??? ?<button type="button" ref="butRef" >按鈕元素</button>
?? ?</div>
</template>
?
<script lang="ts">
import { defineComponent, ref, watch } from '@vue/composition-api';
?
export default defineComponent({
? ? name: '',
? ? components: {},
? ? setup (props, ctx) {
? ? ? ? //從Ctx（context）中解構出 refs
? ? ? ? const { emit, refs } = ctx;
? ? ? ? ? ??
? ? ? ? watch(filterText, (val) => {
? ? ? ? ? ? //在使用的時候直接用 refs.butRef
? ? ? ? ? ? //refs.butRef.filter(val);
? ? ? ? ? ? (refs.butRef as Any).filter(val);
? ? ? ? });
?? ??? ?return {
?? ??? ??? ?butRef
?? ??? ?}
?? ?}
}
</script>

對vue中$refs的理解

$refs是一個對象，持有注冊過ref attribute的所有DOM元素和組件實例。

描述

ref被用來給元素或子組件注冊引用信息，引用信息將會注冊在父組件的$refs對象上，

如果在普通的DOM元素上使用，引用指向的就是DOM元素；

如果用在子組件上，引用就指向組件實例，

另外當v-for用于元素或組件的時候，引用信息將是包含DOM節(jié)點或組件實例的數組。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <div ref="node">Node</div>
        <layout-div ref="layout"></layout-div>
        <div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
    Vue.component("layout-div", {
      data: function(){
          return {
            count: 0
          }
      },
      template: `<div>
                    <div>{{count}}</div>
                </div>`
    })
 
    var vm = new Vue({
        el: '#app',
        mounted: function(){
            console.log(this.$refs.node); // <div>Node</div> // DOM元素
            console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 組件實例
            console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素數組
        }
    })
</script>
</html>

因為ref本身是作為渲染結果被創(chuàng)建的，在初始渲染的時候是不能訪問的，因為其還不存在，而且$refs也不是響應式的，因此不應該試圖用它在模板中做數據綁定，在初始化訪問ref時，應該在其生命周期的mounted方法中調用，在數據更新之后，應該在$nextTick方法中傳遞回調操作來獲取元素或實例，此外一般不推薦直接操作DOM元素，盡量使用數據綁定讓MVVM的ViewModel去操作DOM。

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
 
    var vm = new Vue({
        el: '#app',
        data: function(){
            return {
                msg: 0
            }
        },
        template:  `<div>
                       <div ref="node">{{msg}}</div>
                       <button @click="updateMsg">button</button>
                    </div>`,
        beforeMount: function(){
            console.log(this.$refs.node); // undefined
        },
        mounted: function(){
            console.log(this.$refs.node); // <div>0</div>
        },
        methods: {
            updateMsg: function(){
                this.msg = 1;
                console.log(this.$refs.node.innerHTML); // 0
                this.$nextTick(() => {
                    console.log(this.$refs.node.innerHTML); // 1
                })
            }
        }
    })
</script>
</html>