【vue】 Vue中强制组件重新渲染的正确方法

背景

我在写一个模态框的表单时，发现其中所写的下拉框的默认值只生效一次，比如说我默认值是A，然后我下拉选择B，但是我不提交，然后点击关闭模态框，这个时候应该是算我取消了这次的表单填写，当我下次再点击这个模块框出来时，它应该给我显示的下拉框的默认值为A，但是这里就出现了问题，下拉框的值是我上一次选择的B，也就是说这个下拉框并没有重新渲染，默认值只在页面第一次打开时生效

解决

强制这个组件重新渲染，在每次进入模态框时设置重新渲染，方法主要是给这个下拉框设置一个 :key 

<a-select :defaultValue="myData" @change="selectOnchange" :key="selectNum">
     <a-select-option :value="option" v-for="option in options">
       {{option}}
     </a-select-option>
</a-select>

然后每次进到模态框时更新 key 值就行 

methods: {
    selectOnchange(){
        this.selectNum+=1;
    }
}