关于watch

1.今天做个需求，一个对象传了好几层到子组件，然后子组件改了，这个对象也要同步到变化，最后通过保存回调，得到改了的数据传回来

我直接修改传的对象，比如通过两个el-radio的选中切换，但是传的数据没有变化，已经watch深度监听了

但是监听到的最新值赋值，就改掉了，感觉类似react里的componentWillReceiveProps，反正就是用watch监听到了最新的变化，于是成功同步了数据

代码

<template>
    <div class="alert_params_headers">
        <el-row>
            <el-radio-group v-model="responseHeader.checkRule" @change="heanderTypeChange" class="body_type_radio">
                <el-radio v-for="item in typeOptions" :label="item.value" :key="item.value">{{item.label}}</el-radio>
            </el-radio-group>
        </el-row>
        <el-row>
            <div v-if="responseHeader.checkRule=='notCheck'">
                不校验返回头部
            </div>
            <div v-if="responseHeader.checkRule=='check'">
                <el-table class="step_table" size="mini" :data="apiEditCheck.header" border>
                    <el-table-column label="属性名称" prop="name">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.name" @change="handleNameChange(scope.$index)">
                                <el-option v-for="item in ReqHeaderPropNameList" :label="item.text" :value="item.value" :key="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="必含" prop="required">
                        <template slot-scope="scope">
                            <el-checkbox size="mini" v-model="scope.row.required"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column label="匹配规则" prop="matchRule">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.matchRule">
                                <el-option v-for="item in checkRuleList" :label="item.label" :value="item.value" :key="item.value">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="预期结果" prop="expect">
                        <template slot-scope="scope">
                            <el-input size="mini" v-model="scope.row.expect"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <span v-show="apiEditCheck.header.length>1" @click="handleDelete(scope.$index)" class="delete_steptable">删除</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </el-row>

    </div>
</template>

<script lang="ts">
    import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
    import { State, namespace, Action } from 'vuex-class';
    import _ from 'lodash';
    import DragTable from "mone-test/components/dragTable/index.vue";
    import importJsonDataDlg from "./../importJsonDataDlg/index.vue";
    import { ApiDragTable } from "./../table/index";
    import { ReqHeaderPropNameList } from 'mone-test/viewModules/apiAutomation/apiManager/src/initState'
    import TimeTools from 'mone-test/utils/timeTools';

    const someModule = namespace('storeAutoCenter');
    // 表头配置
    const TheadConfig = [
        { label: '属性名称', prop: 'name', type: 'select', options: ReqHeaderPropNameList },
        { label: '属性值', prop: 'value', type: 'input' },
        { label: '必填', prop: 'required', type: 'checkbox' },
        { label: '备注', prop: 'remark', type: 'input' },
        { label: '操作', prop: 'operate', type: 'slot' },
    ];
    // 新增一行字段

    @Component({
        name: 'AlertParamsHeaders',
        components: {
            DragTable,
            importJsonDataDlg,
        }
    })
    export default class AlertParamsHeaders extends Vue {
        @someModule.State(state => state.apiManager.createHttp.reqHeaders) storeReqHeaders;
        @someModule.Action('SET_API_MANAGER_CREATE_HTTP_REQ_HEADERS') setReqHeaders;
        @Prop({ type: Object, default: () => { return {} } }) apiEditCheck;
        /*** data ***/
        // headers
        theadConfig: object[] = TheadConfig;
        rowData: object = {
            "id": new Date().getTime(),
            "name": "",
            "required": true,
            "matchRule": 'equal',
            "expect": ""
        };;
        // tableData: object[] = [];
        typeOptions: object[] = [
            { value: 'notCheck', label: '不断言' },
            { value: 'check', label: '断言' },
        ]
        checkRuleList: object[] = [
            { value: '', label: '无' },
            { value: 'equal', label: '等于[=]' },
            { value: 'notEqual', label: '不等于[!=]' },
        ]
        ReqHeaderPropNameList: object[] = [
            { value: 'Accept', text: 'Accept' },
            { value: 'Content-Length', text: 'Content-Length' },
            { value: 'Host', text: 'Host' },
            { value: 'User-Agent', text: 'User-Agent' },
            { value: 'Accept-Encoding', text: 'Accept-Encoding' },
            { value: 'Connection', text: 'Connection' },
            { value: 'Content-Type', text: 'Content-Type' },
        ];
        // type: string = "notCheck"//断言类型
        check: object = {
            "responseHeader": {
                "header": [{
                    "id": '时间戳',
                    "name": "",
                    "required": true,
                    "matchRule": '可选equal，notEqual',
                    "expect": ""

                }],
                "checkRule": '可选check，notCheck'
            },
            "responeBody": {
                "checkRule": '可选notCheck，code，jsonPath，xpath，text，regex',
                "statusCode": "200",
                "jsonPath": [{
                    "value": "",
                    "matchRule": '可选notContian，contain，equal，notEqual，greaterThan，greatThanOrEqual，lessThan，lessThanOrEqual',
                    "expect": ""
                }],
                "xpath": "",
                "text": [{
                    "matchRule": '可选notContian，contain，equal',
                    "expect": ""
                }],
                "regex": ""
            }
        }



        constructor() {
            super()
        }

        // headers 最后一行的属性名称
        // private get headerLastLineDataName() {
        //     const self = this;
        //     let len = self.tableData.length;
        //     if (!len) return '';
        //     const lastLine = self.tableData[len - 1];
        //     return (lastLine as any).name;
        // }
        // // 监听 headers 最后一行的属性名称
        // @Watch('headerLastLineDataName')
        // getHeaderLastLineDataName(newVal: string, oldVal: string) {
        //     const self = this as any;
        //     if (newVal && newVal != '') {
        //         let newRow: object[] = [_.extend({}, self.rowData, { id: TimeTools.getTimeStamp() })];
        //         self.tableData = self.tableData.concat(newRow)
        //     }
        // }
        // 监听 tableData
        // @Watch('tableData', { deep: true })
        // getTableData(newVal: object[], oldVal: object[]) {
        //     const self = this as any;
        //     this.setReqHeaders(newVal)
        // }
        responseHeader: object = {
            header: [],
            checkRule: "notCheck"
        }

        @Watch('responseHeader', { deep: true })
        apiEditCheckChange(newVal: object[], oldVal: object[]) {
            const self = this as any;
            self.apiEditCheck.responseHeader.checkRule = newVal.checkRule
            self.apiEditCheck.responseHeader.header = newVal.header.concat()
            console.log('newVal', newVal, self.apiEditCheck)
        }
        heanderTypeChange() {
            const self = this as any;
            // console.log('变化',self.apiEditCheck)
        }

        created() {
            const self = this as any;
            console.log('headers', self.apiEditCheck)
            self.initData();

        }

        // mounted(){}

        /*** methods ***/
        // 初始化数据
        initData() {
            const self = this as any;
            self.responseHeader = Object.assign({},self.apiEditCheck.responseHeader)
            if (self.responseHeader.header.length == 0) {
                self.responseHeader.header[0] = Object.assign({}, self.rowData)
            }
        }
        handleNameChange(index) {
            const self = this as any;
            const tableData: object[] = self.responseHeader.header;
            let len: number = tableData.length;
            if (len < 1) {
                return
            }
            if (index != len - 1) {
                return
            }
            tableData.push({
                "id": new Date().getTime(),
                "name": "",
                "required": true,
                "matchRule": 'equal',
                "expect": ""
            })
        }
        handleDelete(index) {
            const self = this as any
            self.responseHeader.header.splice(index, 1)
        }

    }

</script>

<style scoped lang="scss">
    .alert_params_headers {}
</style>