How to understand how to use refs to reduce the consumption of dom nodes

how do you understand that using refs can reduce the consumption of dom nodes? If you see an example on the official website of Vue, you will use ref,refs.

.

is the understanding and illustration of the following example correct?

<!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">
        

$refsDOM?

<input type="text" ref="inputVal" id="inputVal" /> <button @click="updateVal"></button>

:{{newVal}}

</div> </body> <script> let example5 = new Vue({ el: "-sharpexample-5", data: { newVal: "" }, methods: { updateVal: function () { this.newVal = this.$refs.inputVal.value; //: //let inputVal = document.getElementById("inputVal"); //this.newVal = inputVal.value; } } }) </script> </html>

ref registers an instance of the object, and document.getElementById gets the original object each time, so the object value obtained by refs is only an instance, and you only need to manipulate the DOM node when you write the value.
can it be understood here that refs saves having to get the original document.getElementById object every time?

= supplement =
enthusiastic students on the first floor helped to answer this question and felt quite approved. at the same time, they expanded the difference between the getElement series and querySelectorAll, and felt that Zhihu had to be explained carefully. If you are interested, you can refer to it.
https://www.zhihu.com/questio.
one of the demo describes the query efficiency comparison between querySelectorAll and getElementsBy series. Although querySelectorAll can reduce the consumption of dom node operations, getElementsBy series query efficiency will be higher.
https://jsperf.com/getelement.

if there is something wrong, please point out that it can also help to supplement better learning materials.


as you said, using it this way can avoid the overhead of each acquisition.

but VUE internally uses querySelector series for DOM acquisition instead of getElement. series.
there is a difference between the two: the
querySelector series returns NodeList instances, which are used directly after a query gets the results, which is equivalent to a reserved copy.
getElement. Series returns an instance of HTMLCollection, and each time the result is used, the same query is made, which is quite responsive.

$refs is populated only after the component has finished rendering, and it is non-responsive. It's just a contingency plan for directly manipulating subcomponents-- you should avoid using $refs in templates or computational properties.
Menu