vue中$refs的三種用法解讀

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

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

vue $refs的三種用法

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

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

1、vue2中

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

但是這樣也是有一定風(fēng)險(xiǎn)的。因?yàn)閞ef綁定的在元素上，所以當(dāng)元素沒有進(jìn)行渲染時(shí)，是不能通過ref獲取到元素的。

<template>
? <div>
? ? <div ref="btn">我是一個(gè)按鈕</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的元素時(shí)，獲取到的是一個(gè)數(shù)組。

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

2、vue3中

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

但是，有時(shí)候可能會(huì)遇到無(wú)法獲取這個(gè)節(jié)點(diǎn)，原因是生命周期的問題，在vue3中原來(lái)的created沒有了，而 setup 充當(dāng)了原來(lái)的 created。

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

<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(()=>{
? ? ? ? ? ? ? //使用的時(shí)候?yàn)?butRef.value（需要加點(diǎn)value獲取DOM元素值）
?? ??? ??? ? ?console.log(butRef.value);
? ? ? ? ? ? })
?? ??? ??? ?return {
?? ??? ??? ??? ?butRef
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

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

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

<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）中解構(gòu)出 refs
? ? ? ? const { emit, refs } = ctx;
? ? ? ? ? ??
? ? ? ? watch(filterText, (val) => {
? ? ? ? ? ? //在使用的時(shí)候直接用 refs.butRef
? ? ? ? ? ? //refs.butRef.filter(val);
? ? ? ? ? ? (refs.butRef as Any).filter(val);
? ? ? ? });
?? ??? ?return {
?? ??? ??? ?butRef
?? ??? ?}
?? ?}
}
</script>

對(duì)vue中$refs的理解

$refs是一個(gè)對(duì)象，持有注冊(cè)過ref attribute的所有DOM元素和組件實(shí)例。

描述

ref被用來(lái)給元素或子組件注冊(cè)引用信息，引用信息將會(huì)注冊(cè)在父組件的$refs對(duì)象上，

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

如果用在子組件上，引用就指向組件實(shí)例，

另外當(dāng)v-for用于元素或組件的時(shí)候，引用信息將是包含DOM節(jié)點(diǎn)或組件實(shí)例的數(shù)組。

<!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, ...} // 組件實(shí)例
            console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素?cái)?shù)組
        }
    })
</script>
</html>

因?yàn)閞ef本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候是不能訪問的，因?yàn)槠溥€不存在，而且$refs也不是響應(yīng)式的，因此不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定，在初始化訪問ref時(shí)，應(yīng)該在其生命周期的mounted方法中調(diào)用，在數(shù)據(jù)更新之后，應(yīng)該在$nextTick方法中傳遞回調(diào)操作來(lái)獲取元素或?qū)嵗?，此外一般不推薦直接操作DOM元素，盡量使用數(shù)據(jù)綁定讓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>