如何理解使用refs 减少dom节点的消耗

如何理解使用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...

有不对的地方麻烦指出,也可以帮忙补充更好的学习资料。

阅读 1.5k
评论
    1 个回答
    wmaker
    • 2.9k

    正如你所说的,这样使用可以避免每次获取的开销。

    不过 VUE 内部是使用 querySelector 系列进行 DOM 获取,而不是 getElement... 系列。
    这两个是有区别的:
    querySelector 系列返回的是 NodeList 实例,一次查询得到结果后以后直接使用,相当是保留的副本。
    getElement... 系列返回的是 HTMLCollection 实例,每次使用该结果都会进行一次相同的查询,相当是响应式的。

    $refs 只在组件渲染完成后才填充,并且它是非响应式的。它仅仅是一个直接操作子组件的应急方案——应当避免在模板或计算属性中使用 $refs。
    评论 赞赏