每次在另一个组件上输入时都会执行Vue prop验证

Question

我具有如下Vue组件：

<template>
<div>
    <div class="sel-square"
        @click="selectGender('Male')"
        :class="{ active : value === 'Male'}">
    <div class="sel-square__img">
        <img src="~Img/lp_v1/fam-male.png"
            alt="male" />
    </div>
    <div class="sel-square__caption">
        Male
    </div>
    </div>

    <div class="sel-square"
    @click="selectGender('Female')"
    :class="{ active : value === 'Female'}">
    <div class="sel-square__img">
        <img src="~Img/lp_v1/fam-female.png"
            alt="female" />
    </div>
    <div class="sel-square__caption">
        Female
    </div>
    </div>
</div>
</template>

<script>
export default {
props : { 
    value: {
    type: String,
    required: true,
    validator: (value) => {
        console.log("Validating", value)
        return ['Male', 'Female'].includes(value)
    }   
    }   
},  
methods :{
    selectGender(gender) {
    console.log("Emiting input", gender)
    this.$emit('input', gender)
    }   
}   
}   
</script>

我在主应用程序中将其用作：

<GenderSelector v-model="gender"></GenderSelector>

我面临的问题是，“验证器”在我第一次刷新页面时运行3-4次，然后在每次我在同一页面上拥有的另一个输入元素上的每次按键操作上都继续执行。为了清楚起见，控制台输出一次又一次显示“ Validating Male”，而“ Emitting input”仅在单击时在控制台上显示。

Vue是否在每次输入事件时都反复验证道具？它不太可能，所以我在这里做错了什么？

[JSFiddle：https://jsfiddle.net/eywraw8t/5090/

Answer 1

这完全正常，您没有做错任何事情。每当组件重新渲染时（例如更改道具时），都会触发道具验证。