問題描述：

          在專案中，一個訂單可能含有多個物流軌跡，檢視包裹軌跡時，共用了popup元件，發現一個問題，彈窗內部滾動的位置無法重置，檢查了css程式碼,沒有什麼特殊的，起初搞了一個臨時方案，關閉的時候高度置為0，開啟的時候重新賦值，總感覺不舒服。

<mt-popup v-model="popupVisible" v-if="popupVisible"  >
      <div class="logistics">
        <div class="title">
          <div class="con">
            <div class="logisticsSign">物流資訊</div>
            <div>運單號：{{expressNo}}</div>
          </div>
        </div>
        <div class="info">
          <div class="box" v-for="(log,index) in logs" :key="index">
            <div class="icon"></div>
            <div class="step">
              <div class="step_address">{{log.desc}}</div>
              <div class="step_time">{{log.time}}</div>
            </div>
          </div>
        </div>
        <div @click="confirm" class="confirm mainColor">
          確定
        </div>
      </div>
    </mt-popup>
 

仔細查詢原因後，發現 v-model="popupVisible"。彈窗是根據popupVisible的true or false顯示隱藏的，原理和v-show,一致，雖然瞭解vue指令時，簡單記憶了v-show切換成本低，v-if更高，解決該問題的簡單辦法就是使用v-if,關閉彈窗的時候元件銷燬掉。

具體原理未做深刻了解，整理知識點如下：

VUE中的v-if與v-show

1.共同點

都是動態顯示DOM元素

2.區別

（1）手段：v-if是動態的向DOM樹內新增或者刪除DOM元素；v-show是通過設定DOM元素的display樣式屬性控制顯隱；

（2）編譯過程：v-if切換有一個區域性編譯/解除安裝的過程，切換過程中合適地銷燬和重建內部的事件監聽和子元件；v-show只是簡單的基於css切換；

（3）編譯條件：v-if是惰性的，如果初始條件為假，則什麼也不做；只有在條件第一次變為真時才開始區域性編譯（編譯被快取？編譯被快取後，然後再切換的時候進行區域性解除安裝); v-show是在任何條件下（首次條件是否為真）都被編譯，然後被快取，而且DOM元素保留；

（4）效能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗；

（5）使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換。

 

Tips：（1）如果v-show作用的元素，css檔案中display:none，通過v-show進行設定不能顯示該元素；

原因：v-show控制顯隱，是通過js程式碼去修改元素的element style，如果value為false，設定display: none;如果value為true，設定display: ''；於是value為true時，只能將element style中的display效果清除，並不能覆蓋css中的display效果；