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.