v-if 與 v-show 的微小差距

今天在解一個 issue，有一個表單如下，選好設備與類型之後，進行搜尋會生成下方的表格，但是這個表格有一個bug，就是每次重新搜尋，重新生成表格都不會捲回表格最上方，而是會停在上次捲到的位置。剛好可以藉這個案例來談談 v-if 與 v-show的差異。

剛看到這個 issue 我還想說，每次按下搜尋打完 API 之後，讓表格 scroll 到最上方就好了：

const table = this.$refs.searchTable;
      
if (table) {
       
   table.scrollTo({
          top: 0,
          behavior: 'smooth' 
        });
 }

結果看了一下 HTML tempalte， table 的 DOM 元素上綁定了 v-show，我靈光一閃，把它改成 v-if ，結果就成功解掉這個issue了，每次重新打 API 之後都會重新捲表格最上方顯示新的資料。

v-if 與 v-show 的差別在於，v-if 每次都會重新生成 DOM 元素，而 v-show 只是利用 CSS 的 display 屬性作顯示與否的切換而已。而在這個地方使用 v-if 恰到好處。