vuejs2 - 每次在另一个组件上输入时，都会执行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是否在每次输入事件时都反复验证 Prop ？这不太可能，所以我在这里做错了什么？

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

Answer 1

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

在组件上使用v-model时，每当您发出input事件时，该组件都会重新渲染，因为它会有效地更新value属性。该组件本身不会更新value属性，而是其父对象。因为v-model或多或少是:value="value" @input="value = $event"的简写。因此，该组件将重新渲染并触发验证。

您不必为此担心，我认为您不需要validator，因为您的组件很可能始终会发出有效值。