v-if和v-show、display: none和visibility：hidden的區別

v-if指令和v-show指令的區別

• 相同點：都可以控制標籤的顯隱。
• 不同點：

一、實現本質方法區別

• v-if是動態的向DOM樹內添加或者刪除DOM元素
• v-show本質是利用標籤的display屬性，通過visibility和none控制顯隱
• v-if="false"在DOM不能獲取到該標籤
• v-show=false在DOM中仍能獲取到該標籤

二、編譯的區別

• v-show其實是在控制css
• v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷燬的重建內部的事件監聽和子組件

三、編譯的條件

• v-show都會編譯，初始值爲false,只是將display設爲none,但它也編譯了
• v-if初始值爲false，就不會編譯了

四、性能

• v-show只編譯一次，後面其實就是控制css，而v-if不停的銷燬和創建，故v-show性能更好一點

display：none和visibility：hidden的區別

• 相同點：都是隱藏標籤，對應的標籤仍存在DOM結構中
• 不同點：
  標籤設置display: none後，不會佔據該標籤原來所在的位置，會觸發重流。
  標籤設置visibility: hidden後，仍佔據原來的位置，會觸發重繪。