vue中，watch首次变化不触发问题

Question

在vue项目中，有以下代码：

<template>
    <div>
        <basic-info v-if="pBasicInfoVO.isShow"></basic-info>
        <ordiary-info v-if="pOrdinaryAttrInfoVO.isShow"></ordiary-info>
        <div class="footer">
            <a href="javascript:;" class="btn btn-success" @click="saveWarePublishVO">Save</a>
            <a href="javascript:;" class="btn btn-cancel">Cancel</a>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import * as type from "store/modules/warePublish/type"
    
    export default {
        data() {
            return {
                breadcrumbs: [
                    {title: "Location"},
                    {title: "Product Management"},
                    {title: "Product Creation"}
                ],
                activeStep : 1,
                isOpen: false,
            }
        },
      
        methods: {
            saveWarePublishVO() {
                this.setIsValidate(!this.isValidate)
                let isBasicInfoVoValid = this.basicInfoVO.validateFlag
                let isOrdinaryAttrInfoVOValid = this.ordinryAttrbuteInfoVO.validateFlag
                this.$store.dispatch(type.SAVE_WARE_INFO)
            },
            ...mapMutations({
                setIsValidate: 'SET_VALIDATE',
                setAlertConfig: 'SET_ALERT_CONFIG'
            })
        },
     computed: {
         ...mapGetters([
            'isValidate'
            'basicInfoVO',
            'ordinryAttrbuteInfoVO'
        ])
     }
        
    }
 }
</script>

点击save的时候，取反vuex中isValidate（默认为false）,然后在每一个组件监听watch isValidate，但是在ordiary-info组件中监听不到isValiate的变化，但是如果点击checkbox，再点击save按钮，就可以监听到isValidate的变化，这是什么原因呢？

<template>
    <div>
        <div class="form-group">
            <label class="control-label" :class="{necessary: attribute.required}">{{ attribute.propertyName }}:</label>
            <div class="content">
                <div class="form-item ell" v-for="item in lessAttriList">
                    <input :type="inputType"
                           :id="getId()"
                           :name="getId(false)"
                           :class="inputType"
                           :value="item.propertyValueId"
                           v-model="checkedIdList"
                           v-validate="{
                                    required: attribute.required
                               }"/>
                    <label :for="getId(false)" :title="item.valueData">{{ item.valueData }}</label>
                </div>
                <div v-if="moreAttriList.length > 0 && isMore">
                    <div class="form-item ell" v-for="item in moreAttriList">
                        <input :type="inputType"
                               :id="getId()"
                               :name="getId(false)"
                               :class="inputType"
                               :value="item.propertyValueId"
                               v-model="checkedIdList"
                               v-validate="{
                                    required: attribute.required
                               }"/>
                        <label :for="getId(false)" :title="item.valueData">{{ item.valueData }}</label>
                    </div>
                </div>
            </div>
            <a v-if="moreAttriList.length > 0" href="javascript:;" class="more-btn" :class="[{up: isMore}]" @click="showMore">{{ isMore ? 'Less' : 'More'}}</a>
        </div>
        <p class="text-danger m-l-211" v-show="showErrMsg">required.</p>
    </div>
</template>


computed: {
        ...mapGetters([
            'isValidate',
            'ordinryAttrbuteInfoVO'
        ])
    }
     watch: {
        isValidate(old, newVal) {
            console.log(old, newVal)
            })
        }
    }

Answer 1

你这个isValidate是复杂数据类型吗,复杂数据类型要用深度监听