vue强制组件重新渲染

在有些时候，我们需要强制重新渲染组件

例如，在使用elementUI的联级下拉选择框的时候，我们选择了指南/设计原则/反馈，然后再选择一级选项组件，后面点开下拉框时一级选项都是选的组件，和我们实际选择的不匹配，如下图所示：

image.png

这是因为下拉框仅仅再第一次出现时是重新渲染，后面再收起只是隐藏，会记录之前的一些样式状态。如果我们希望下拉框每次展示都重新渲染，可以在下拉框收起的时候，将真个级联选择框强制重新渲染一次就行了，实现这个我们需要用到vue组件的特殊属性：key

key的官方说明如下：

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

我们只需要给级联选择框一个key属性，并在每次级联选择框收起的时候，改变这个key，则级联选择框就会自动强制渲染