vue3中强制渲染组件

说到强制渲染组件，在开发过程中其实遇到并不多，但有时候你总能碰到一些奇怪的组件，不用强制渲染就没办法正确地开发。

组件例子

首先来看一个element的组件DatePicker 日期选择器。

const format = props.format ?? (DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE)

const Component = getPanel(props.type)

return (
  <CommonPicker
    {...props}
    format={format}
    type={props.type}
    ref={commonPicker}
    onUpdate:modelValue={onModelValueUpdated}
  >
    {{
      default: (scopedProps: /**FIXME: remove any type */ any) => (
        <Component {...scopedProps} />
      ),
      'range-separator': slots['range-separator'],
    }}
  </CommonPicker>
)

format是用于设置指定输入框的格式，但看代码我们很明显就能看到format并非是直接取props.format，而是经过重新赋值生成的。
这会导致什么？这会导致我们使用过程中，给format传入一个响应式数据时，他能取到值但无法做到响应的操作。（并且在ts中format也只能接受string，不能接受Ref<string>）。
所以当我们想要通过改变format来动态地改变日期展示格式时，会直接卡住无法进行。

通过key强制渲染组件

既然有了问题，那解决办法也会相应产生：强制渲染组件。我们可以通过组件上key的改变让vue认为是新组件并强制渲染。

<el-date-picker
 :key='dateStandard'
  v-model="searchForm.startTime"
  type="daterange"
  :format="dateStandard"
/>

这样通过添加key来强制渲染组件。