el-drawer组件内数据不及时更新

el-drawer组件内数据不及时更新

问题

• 先看代码：

<!--父组件-->
<MyDrawer
      :title="title"
      :drawerShow="drawerShow"
      ref="drawer"
      v-show="drawerShow"
      @changeDrawer="changeDrawer"
></MyDrawer>

<!--子组件-->
<el-drawer
      :title="title"
      :visible="drawerShow"
      size="50%"
      :before-close="drawerClose"
>...</el-drawer>

• 在上述代码片段中显示了一个父组件，该父组件呈现一个名为 “MyDrawer” 的自定义组件 和“el-drawer” 的组件。父组件将一些值传递给 “MyDrawer” 组件，包括 “title” 和 “drawerShow” 。子组件 “el-drawer” 接收一些值，包括 “title”、“visible” 和 “size”。“MyDrawer” 组件上的 “v-show” 指令根据 “drawerShow” 的值确定是否显示组件。

• 问题的关键就在于使用了v-show

• 详情参考官方文档 v-if vs v- show；这里对原文核心部位进行摘要：

  • v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  • v-if也是惰性的:如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
  • 相比之下，v-show 就简单得多——不管初始条件是什么,元素总是会被渲染，并且只是简单地基于CSS进行切换。
  • 一般来说，v-if 有更高的切换开销,而v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show 较好;如果在运行时条件很少改变，则使用v-if 较好。

• 总结就是笔者一开始为了节省性能使用v-show来控制抽屉页的展示，但是这样就为后续数据更新的渲染埋下了坑。

解决

• 最快捷的一种方式就是通过v-if来控制页面的展示：

<!--父组件-->
<MyDrawer
      :title="title"
      :drawerShow="drawerShow"
      ref="drawer"
      v-if="drawerShow"
      @changeDrawer="changeDrawer"
></MyDrawer>

<!--子组件-->
<el-drawer
      :title="title"
      :visible="drawerShow"
      size="50%"
      :before-close="drawerClose"
>...</el-drawer>

• 但是这样其实是违背了自己的初衷，（渲染性能++），而且让我不能接受的一个点就是使用v-if来控制抽屉页的渲染的时候由于每次组件的销毁和重建，会导致抽屉页的“抖动”（抽屉页展示一半之后会快速关闭重新打开来更新）
• 所以通过查看Element UI的文档获得一个折中的解决方案：Drawer 抽屉
• 加个属性destroy-on-close控制是否在关闭Drawer之后将子元素全部销毁，导致组件再次渲染，但是不会出现抖动的效果

<!--父组件-->
<MyDrawer
      :title="title"
      :drawerShow="drawerShow"
      ref="drawer"
      v-show="drawerShow"
      @changeDrawer="changeDrawer"
></MyDrawer>

<!--子组件-->
<el-drawer
      :title="title"
      :visible="drawerShow"
      size="50%"
      :destroy-on-close="true"
      :before-close="drawerClose"
>...</el-drawer>