Vue中key的一个实用功能：重新渲染某个vue组件

问题：

最近在弄公司有一个比较老的项目，使用的是iview 1.x 版本的组件库，然后找到了一个key属性的实用功能，一般都是配合v-for来使用key属性，其实key也可以单独使用。

 watch: {
//监测isEdit的值，判断是否是新增还是修改用户
   isEdit(value) {
     if (value) {
       this.rules.password = [];
     } else {
       this.rules.password = [
         {
           required: true,
           message: "密码不能为空",
           trigger: "blur",
         },
       ];
     }
   },
 }

新增用户时，密码是需要的，修改密码时，密码为空就保留旧密码

但是表单的校验的星号(*)并没有随着rules.password的修改发生更新，所以需要将表单组件重新渲染

解决方案：

搜索了一圈之后，找到了一个好用的方案，即给表单组件绑定一个key属性：

<iv-form :model="form" :rules="rules" :key="key" ref="form"></iv-form>

然后在每次显示表单组件的时候修改key值，vue就会重新渲染该组件。

reset() {
  this.key++;
  this.$refs["form"].resetFields();
  this.isEdit = false;
},