如何理解使用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原對象？======補(bǔ)充=====一樓的熱心同學(xué)幫忙回答了這個問題，覺得挺認(rèn)可，同時拓展下看了getElement系列和querySelectorAll的區(qū)別，覺得知乎這個解釋還得仔細(xì)的，有興趣可以參考。https://www.zhihu.com/questio...其中有一個demo講述了querySelectorAll和getElementsBy系列的查詢效率對比，雖然querySelectorAll可以減少對dom節(jié)點操作的消耗，但是getElementsBy系列的查詢效率會更高。https://jsperf.com/getelement...有不對的地方麻煩指出，也可以幫忙補(bǔ)充更好的學(xué)習(xí)資料。
如何理解使用refs 減少dom節(jié)點的消耗
慕村225694
2019-03-20 21:15:57
