极客观点
项目管理
HarmonyOS
如何理解使用refs可以减少dom节点的消耗？看到Vue官网的例子会使用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节点的消耗?</p>
<input type="text" ref="inputVal" id="inputVal" />
<button @click="updateVal">修改</button>
<p>结果：{{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节点。
这里是否可以理解成refs节省的是不用每一次都去获取document.getElementById原对象？
======补充=====
一楼的热心同学帮忙回答了这个问题，觉得挺认可，同时拓展下看了getElement系列和querySelectorAll的区别，觉得知乎这个解释还得仔细的，有兴趣可以参考。
https://www.zhihu.com/questio...
其中有一个demo讲述了querySelectorAll和getElementsBy系列的查询效率对比，虽然querySelectorAll可以减少对dom节点操作的消耗，但是getElementsBy系列的查询效率会更高。
https://jsperf.com/getelement...
有不对的地方麻烦指出，也可以帮忙补充更好的学习资料。
正如你所说的，这样使用可以避免每次获取的开销。
不过 VUE 内部是使用 querySelector 系列进行 DOM 获取，而不是 getElement... 系列。
这两个是有区别的：
querySelector 系列返回的是 NodeList 实例，一次查询得到结果后以后直接使用，相当是保留的副本。
getElement... 系列返回的是 HTMLCollection 实例，每次使用该结果都会进行一次相同的查询，相当是响应式的。