技術標籤：vue-elementuivue前端elementui

先說解決方案：加上v-if每次都會銷燬和重新建立

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  v-if="dialogVisible"
  width="30%"
  :before-close="handleClose">
</el-dialog>

在專案中遇到一個場景，點選table中的授權按鈕，去給這一行對應的使用者授權角色

邏輯：點選授權按鈕，顯示授權dialog，在子元件的created生命週期中去獲取可以授權的角色的一些資訊，但是發現當el-dialog顯示一次，下一次就不會呼叫created生命週期函式中的初始化方法了。。。
檢查發現dialog切換是使用display：none來控制的，我理解就相當於v-show的作用，並不是真正的建立和銷燬，而是通過display來切換的

為了讓每次都建立，給el-dialog加上v-if指令，就會每次都銷燬和建立了

回顧一下v-if 和 v-show的區別

1.什麼是v-show指令
v-show和v-if的能夠一樣都是條件渲染, 取值為true就顯示, 取值為false就不顯示

2.v-if和v-show區別
v-if: 只要取值為false就不會建立元素
v-show: 哪怕取值為false也會建立元素, 只是如果取值是false會設定元素的display為none

3.v-if和v-show應用場景
由於取值為false時v-if不會建立元素, 所以如果需要切換元素的顯示和隱藏, 每次v-if都會建立和刪除元素
由於取值為false時v-show會建立元素並設定display為none, 所有如果需要切換元素的顯示和隱藏,
不會反覆建立和刪除, 只是修改display的值
所以: 如果企業開發中需要頻繁切換元素顯示隱藏, 那麼推薦使用v-show, 否則使用v-if