ref和$refs獲取dom元素

為什么會有 ref 和 $refs？

因為在vue頁面中使用dom查找元素，不管你是不是在子組件里面查找，查找的都是整個頁面的元素，如果你想查找單獨組件里面的元素是不容易實現(xiàn)的，除非把每個組件的class寫成獨一無二，但是在日常開發(fā)中，一個vue頁面不知道會有多少組件，所以出現(xiàn)了rel和 refs.

ref 和 $refs 作用

ref 和 $refs 使用

通過在要獲取的元素上面店家rel屬性 rel="名稱"。
然后在要獲取此元素的js代碼上通過 this.$rels.名稱 就可以獲取。

如此獲取的就是當前組件內(nèi)部的標簽了，

<template>
  <div>
    <!-- 為input框添加rel屬性 -->
    <input  type="text" :value="msg" ref="inp"
        @input="fun($event.target.value)">
    <button @click="showInput">顯示</button>
  </div>
</template>
<script>
export default {
    props:{
        msg:String
    },
    mounted(){
    },
    methods:{
        fun(e){
            this.$emit('update:msg',e)
        },
        showInput(){
            //通過this.$rels.inp獲得標簽
            console.log(this.$refs.inp)
            console.log(this.$refs.inp.value)
        }
    }
}
</script>

也是成功的獲取到了并且打印出來：

vue異步更新和$nextTick使用

什么是vue的異步更新？
Vue的異步更新是指在Vue的響應(yīng)式系統(tǒng)中，更新組件的方式是異步的。這意味著當數(shù)據(jù)發(fā)生變化時，Vue并不立即更新組件的DOM，而是等到同一事件循環(huán)中的所有數(shù)據(jù)變化完成后，再統(tǒng)一進行一次更新操作。

vue的異步更新好處
Vue之所以采用異步更新的機制，是為了優(yōu)化性能和避免不必要的重復(fù)渲染。當數(shù)據(jù)發(fā)生變化時，Vue會將變化加入到一個隊列中，然后通過異步的方式批量處理這些變化。這樣可以避免頻繁的DOM操作，提高性能。

異步更新還帶來一個重要的好處，即在同一個事件循環(huán)中，多處對同一數(shù)據(jù)進行修改時，只會觸發(fā)一次更新操作。這樣可以減少重復(fù)的計算和渲染，提升性能。

總結(jié)來說，Vue的異步更新可以提高性能和優(yōu)化渲染，使得組件更新更加高效和靈活。

案列：
我需要點擊編輯按鈕 然后顯示input框 并且聚焦到input框上。

我的代碼是這樣的：

<template>
  <div>
    <!-- 為input框添加rel屬性，使用v-if來顯示隱藏input框 -->
    <input  type="text" :value="msg" v-if="isShow" ref="inp">
    <!-- 添加方法 -->
    <button  @click="showInput">編輯</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isShow:false
        }
    },
    props:{
        msg:String
    },
    mounted(){
    },
    methods:{
        showInput(){
            //顯示input框
            this.isShow = true
            //通過this.$rels.inp獲得標簽
            console.log(this.$refs.inp)
            console.log(this.$refs.inp.value)
            //為input框聚焦
            this.$refs.inp.focus()
        }
    }
}
</script>

然后我點擊編輯按鈕出現(xiàn)了下面的錯誤，說我的this.$refs.inp是 undefined。

為什么 “顯示之后“ 立刻獲取焦點沒有成功呢？
就是vue采用的是異步更新的機制，當 //顯示input框 this.isShow = true時并沒有馬上去更新頁面的dom，而是等待這個方法執(zhí)行完成再去進行更新頁面，所以導(dǎo)致獲取的this.$refs.inp是 undefined。所以問題就是在我在它沒有更新dom的時候就去獲取dom，所以是undefined.

如何解決?(使用$nextTick）

<template>
  <div>
    <input  type="text" :value="msg" v-if="isShow" ref="inp">
    <button  @click="showInput">編輯</button>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isShow:false
        }
    },
    props:{
        msg:String
    },
    mounted(){
    },
    methods:{
        showInput(){
            this.isShow = true
            //通過this.$rels.inp獲得標簽
            //將需要使用未更新的dom元素使用this.$nextTick()封裝為箭頭函數(shù)包裹起來
            this.$nextTick(()=>{
                this.$refs.inp.focus()
                console.log(this.$refs.inp)
                console.log(this.$refs.inp.value)
            })
        }
    }
}
</script>

最后成功聚焦，并且控制臺輸出了當前獲取標簽：
文章來源地址http://www.zghlxwxcb.cn/news/detail-704052.html

到了這里，關(guān)于【vue2第十二章】ref和$refs獲取dom元素 和 vue異步更新與$nextTick使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！