鍍金池/ 問答/HTML/ 如何理解使用refs 減少dom節(jié)點(diǎn)的消耗

如何理解使用refs 減少dom節(jié)點(diǎn)的消耗

如何理解使用refs可以減少dom節(jié)點(diǎn)的消耗？看到Vue官網(wǎng)的例子會(huì)使用ref,refs.

下面例子的理解和說(shuō)明是對(duì)的嗎？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue組件</title>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>

<body>
    <div id="example-5">
        <p>如何理解使用$refs可以減少操作DOM節(jié)點(diǎn)的消耗?</p>
        <input type="text" ref="inputVal" id="inputVal" />
        <button @click="updateVal">修改</button>
        <p>結(jié)果：{{newVal}}</p>
    </div>
</body>
<script>
    let example5 = new Vue({
        el: "#example-5",
        data: { newVal: "" },
        methods: {
            updateVal: function () {
                 this.newVal = this.$refs.inputVal.value;
                //也可以用：
                //let inputVal = document.getElementById("inputVal");
                //this.newVal = inputVal.value;
 
            }
        }
    })
 </script>

</html>

圖片描述

ref注冊(cè)了對(duì)象的實(shí)例，而document.getElementById每次獲取的是原對(duì)象，所以refs獲取的對(duì)象值只是一個(gè)實(shí)例，只需要寫值時(shí)操作DOM節(jié)點(diǎn)。
這里是否可以理解成refs節(jié)省的是不用每一次都去獲取document.getElementById原對(duì)象？

======補(bǔ)充=====
一樓的熱心同學(xué)幫忙回答了這個(gè)問題，覺得挺認(rèn)可，同時(shí)拓展下看了getElement系列和querySelectorAll的區(qū)別，覺得知乎這個(gè)解釋還得仔細(xì)的，有興趣可以參考。
https://www.zhihu.com/questio...
其中有一個(gè)demo講述了querySelectorAll和getElementsBy系列的查詢效率對(duì)比，雖然querySelectorAll可以減少對(duì)dom節(jié)點(diǎn)操作的消耗，但是getElementsBy系列的查詢效率會(huì)更高。
https://jsperf.com/getelement...

有不對(duì)的地方麻煩指出，也可以幫忙補(bǔ)充更好的學(xué)習(xí)資料。

回答
編輯回答
脾氣硬

正如你所說(shuō)的，這樣使用可以避免每次獲取的開銷。

不過(guò) VUE 內(nèi)部是使用 querySelector 系列進(jìn)行 DOM 獲取，而不是 getElement... 系列。
這兩個(gè)是有區(qū)別的：
querySelector 系列返回的是 NodeList 實(shí)例，一次查詢得到結(jié)果后以后直接使用，相當(dāng)是保留的副本。
getElement... 系列返回的是 HTMLCollection 實(shí)例，每次使用該結(jié)果都會(huì)進(jìn)行一次相同的查詢，相當(dāng)是響應(yīng)式的。

$refs 只在組件渲染完成后才填充，并且它是非響應(yīng)式的。它僅僅是一個(gè)直接操作子組件的應(yīng)急方案——應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用 $refs。
2017年6月15日 09:38