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

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

下面例子的理解和說明是對的嗎？

<!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é)點的消耗?</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注冊了對象的實例，而document.getElementById每次獲取的是原對象，所以refs獲取的對象值只是一個實例，只需要寫值時操作DOM節(jié)點。
這里是否可以理解成refs節(jié)省的是不用每一次都去獲取document.getElementById原對象？

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

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

回答

編輯回答

脾氣硬

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

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