旨在帮助那些使用iview组件库的开发同学熟练使用form表单组件，和当碰到组件渲染后校验规则仍会变化的需求时解决增加必填校验项或者改变某项从非必填到必填的时候小红星不出现的问题。如果你对本篇文章感兴趣的话，请接着往下看吧

首先大家一定想知道小红星到底怎样才能出现，怎样才能消失。弄清楚这点后，我们才能在开发中‘对症下药’，找到解决问题的方法。要想弄清楚这个问题，只有到源码中一探究竟，方知如何。好了，废话不多说下面随着小编开心地读起源码吧😂

如上三图所示控制红星出现的属性即是computed中的classes，而这个class中的红框圈住的那一行就是红星的样式类，当后面表达式的值为true时，小红星就会显示出来。我们可以看到，一共有两个属性决定这个类是否显示，一个是this.required，另一个是this.isRequired，前面的required值是一个prop属性，默认为false，一般我们在用的时候不会在单个form-item上去传递这个值，所以这个值我们暂且可以认定它为false。第一个值确定为false了，就只能看第二个值了，isRequired是form-item组件中data里定义的，默认也是false。到此我们就知道了小红星原来是由这个isRequired的值来决定是否出现的，接下来就要看看这个值是在组件中怎么用的，谁能改变这个值，这个值是由什么决定的？

翻看源码发现只有在这个setRules()方法中，isRequired的值会被重新赋值。所以这就是我们控制小红星出现与消失的关键地方。通过读这个函数发现，isRequired的值其实就是你在外界定义的规则中的required的值。当你给某一项设置为必填的时候，这个红星就会出现在对应的form-item前面。

到这里其实我们已经了解到了在什么情况下小红星会出现了，但是还有个小问题就是这个红星给我们的感觉好像不是即时变化的，即使某一项的必填校验规则变了，小红星就好像没有收到这个变化的信号，‘不为所动’，很淡定的样子。这给我们的感觉就好像是一个bug，那么造成这样的原因是什么呢？请看下面源码解读。

由前面的内容可知道，小红星是由isRequired的值来决定显示与否的。而isRequired的值只会在setRules()方法中被改变，按照这个线索，我们需要知道哪里会调用setRules()方法就行了。如上两图，在form-item组件中一共有两个地方会调用setRules()方法执行，一个是mounted时，另一个是watch方法中。由vue的生命周期的知识可知，mounted中的setRules()方法只会在form-item组件渲染完毕后调用一次。倘若想在其他时候调用setRules方法，只能在watch中，但是watch中，它是监听的form-item组件的prop属性rules，一般我们使用的是form组件的rules属性，不会在单个form-item中定义这一项的rules，所以这个rules是不会改变的，因此watch中的setRules方法是一直不会执行的。 到这里我们似乎明白了，根据组件的源码定义，在第一次组件渲染完毕之后，我们似乎不能通过调用setRules方法去改变isRequired的值了。我们只能使用this.$refs.prop.isRequired = true 或者 false 去改变小红星了。

---由于组件的设计，isRequired的值只会在mounted的时候被赋值一次，也就是说我们在组件渲染前第一次传的rules（form表单中绑定的属性，对form表单不了解的同学可以看一下我上一篇的文章form表单动态校验）中哪一项是必填项，哪一项前面才会有红星，之后规则再变化的话，红星也不会跟着变化了。因此我们只能在外面手动的设置，给后面校验规则会变化的那一项添加一个ref属性，然后再根据自己的业务逻辑调用this.$refs.prop.isRequired = true 或则false的方法添加或者去掉小红星。

好了，本次分享的内容到此就结束了，希望对大家的开发有一点帮助，如果大家有任何想法的话欢迎与我交流哦，我回复很快的哦😊，谢谢大家观看🙏，拜👋。