vue ref標(biāo)簽屬性和$ref關(guān)系

javascript原生語法和jquery都是屬于操作DOM節(jié)點(diǎn)元素，去實(shí)現(xiàn)功能的.

Vue給我們提供了一個專門用來獲取DOM節(jié)點(diǎn)的方法，使用元素的ref屬性，使用起來非常方便。

(這只是用于偶爾vue需要操作節(jié)點(diǎn)時候才使用)

vue的ref屬性

ref 被用來給元素或子組件注冊引用信息。

引用信息將會注冊在父組件的 $refs 對象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例：

<!-- `vm.$refs.p` will be the DOM node -->
<p ref="p">hello</p>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>

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

關(guān)于 ref 注冊時間的重要說明：因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應(yīng)式的，因此你不應(yīng)該試圖用它在模板中做數(shù)據(jù)綁定。

vm.$refs

一個對象，持有 注冊過 ref 特性 的所有 DOM 元素和組件實(shí)例。

以上是官方文檔里面的內(nèi)容,總結(jié)為下面的：

• 給要獲取的元素節(jié)點(diǎn)添加ref屬性，使用有意義的駝峰命名
• 通過vue實(shí)例.$refs.屬性名即可獲取標(biāo)記的元素，我們在mounted鉤子函數(shù)中調(diào)用可以直接使用this指向當(dāng)前vue實(shí)例，這個才是vue推薦的元素獲取方式
• 如果ref重名后面的會把前面的覆蓋
• 元素使用v-for,返回dom節(jié)點(diǎn)數(shù)組

下面舉例驗(yàn)證

<div id="app">
        <div>
            <h2 ref="name1">這是name1節(jié)點(diǎn)元素</h2>
            <p ref="name2">這是name2節(jié)點(diǎn)元素</p>
        </div>
 </div>

 mounted() {
                console.log(this);   //vue實(shí)例對象
                console.log(this.$refs.name1);   //上面的h2標(biāo)簽元素
                console.log(this.$refs.name1.textContent);  //標(biāo)簽內(nèi)容
                console.log(this.$refs.name2);  //上面的p標(biāo)簽元素                
            },

如果ref值重復(fù)時,會打印出哪個DOM節(jié)點(diǎn)? 根據(jù)上面的知識點(diǎn)，我們知道,后面的會覆蓋前面的

下面驗(yàn)證一下：

     <div id="app">       
        <h2 ref="name1">這是name1節(jié)點(diǎn)元素</h2>
        <p ref="name2">這是name2節(jié)點(diǎn)元素</p>
   		 <span ref="name1">這是ref的name1值重復(fù)的節(jié)點(diǎn)元素</span><br>
   		 <i ref="name2">這是ref的name2值重復(fù)的節(jié)點(diǎn)元素</i><br>
	  </div>	  

一樣在代碼中執(zhí)行以下命令

mounted() {
                console.log(this);   //vue實(shí)例對象
                console.log(this.$refs.name1);   //上面的h2標(biāo)簽元素
                console.log(this.$refs.name1.textContent);  //標(biāo)簽內(nèi)容
                console.log(this.$refs.name2);  //上面的p標(biāo)簽元素                
            },

打印結(jié)果是span和i標(biāo)簽元素，覆蓋了前面的h2和p標(biāo)簽

如果把ref值設(shè)置ul標(biāo)簽

<ul  ref="veg">
   <li>水果1</li>
   <li>水果2</li>
   <li>水果3</li>
</ul>

執(zhí)行

console.log(this.$refs.veg);

直接打印出整個DOM對象

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

 <div id="app">
        <ul>
            <li ref="fruits" v-for="(item,index) in arr" :key="index">水果{{item}}</li>
        </ul>
   </div>

 const app = new Vue({
            el: '#app',
            mounted() {               
                console.log(this.$refs.fruits); //打印的是li標(biāo)簽數(shù)組
                console.log(this.$refs.fruits[1].textContent);
            },
            data: {
                arr: [1, 2, 3, 4, 5],
            },
        });

運(yùn)行

console.log(this.$refs.fruits);

以后得到的數(shù)組

新手對vue中特殊的標(biāo)簽屬性ref和key的理解

ref屬性

• 定義：用來給元素或子組件注冊引用信息
• 理解：類似id（原生js中id的替代者），給元素或者組件打標(biāo)識

作用

1、應(yīng)用在html標(biāo)簽上，是用來獲取真實(shí)的DOM元素（相當(dāng)于原生的document.getElementById("xxx")）

2、應(yīng)用在組件標(biāo)簽上，得到的是組件的實(shí)例對象

使用方式

第一步：打標(biāo)識

<h1 ref="xxx">...</h1>
<School ref="xxx"></School>

第二步：獲取

this.$refs.xxx

ref屬性與原生的id屬性的區(qū)別

1、添加在html標(biāo)簽上

兩者結(jié)果相同，都是得到真實(shí)的DOM元素

2、添加到組件上

• ref屬性獲取的是組件實(shí)例對象
• id屬性相當(dāng)于給組件最外層容器添加了id屬性，得到的是最外層包裹著的所有真實(shí)DOM元素

key屬性

理解：給虛擬DOM對象添加標(biāo)識，相當(dāng)于給每個元素添加一個獨(dú)一無二的id身份

作用：當(dāng)數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)新數(shù)據(jù)生成新的虛擬DOM，隨后Vue進(jìn)行新舊虛擬DOM的差異對比，比較規(guī)則如下：

對比規(guī)則

1、舊虛擬DOM中找到與新虛擬DOM相同的key

• ① 若虛擬DOM中的內(nèi)容沒有變化，那么直接使用之前的真實(shí)DOM
• ② 若虛擬DOM中的內(nèi)容變化了，則生成新的真實(shí)DOM，隨后替換掉頁面之前的DOM

2、新虛擬DOM中未找到與舊虛擬DOM相同的key

創(chuàng)建真實(shí)的DOM，隨后渲染到頁面

用index作為key可能引發(fā)的問題

1、若對數(shù)據(jù)進(jìn)行：逆序添加和刪除等破壞數(shù)據(jù)順序的操作

會產(chǎn)生沒有必須的真實(shí)DOM更新，頁面效果沒問題，但效率低

2、若結(jié)構(gòu)中包含輸入類的DOM

會產(chǎn)生錯誤的DOM更新，頁面出現(xiàn)問題

開發(fā)中如何選擇key？

• ① 如果數(shù)據(jù)有唯一標(biāo)識，比如id，身份證號，學(xué)號等，可以直接使用數(shù)據(jù)的唯一標(biāo)識
• ② 如果不存在逆序等破壞順序的操作，僅用于渲染展示，那么使用index作為key值沒有問題

總結(jié)

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論