50 基于 provide/inject 属性的模型视图不同步问题

前言

这是一个之前 2023年12月月底碰到的一个问题

这个问题还是比较复杂, 呵呵这个在当时看来我甚至觉得我可能搞不定这个问题

但是当时出现了一些其他的可以临时解决这个问题的方式, 因此当时就没有深究

然后过了两天重新复现了一下问题, 重新看了一下这个问题, 发现这个问题然后发现一个很奇怪的现象

就是父子组件拿到的 model 不同步, 这里的 udm-form 是从业务这边拿到一个 model, 然后业务这边做了一些更新之类的操作, 然后 udm-input 这边拿到的 model 却还是原来的数据

udm-form -- provide model
el-form 
el-row 
el-col 
el-form-item 
udm-input -- inject model 
input

然后直到最近 2024年1月月底又重新来看一下这个问题, 然后简化一下问题

重新复现一下这个问题花了一天的时间

如下的测试用例有点长, 问题也比较复杂, 这个排查的过程也是相当复杂的, 这里仅仅是看一下这个问题的流程, 以及一些解决方式

当然这个也主要是和组件的设计问题息息相关

测试用例

业务组件

<template>
  <div class="testParent" >
    <!--  <el-input v-model="checkItem" ></el-input>-->
    <!--  <UserDefinedModelInput name="checkItem" v-model="checkItem" ></UserDefinedModelInput>-->

    <div v-for="dateItem in dateItemList" >
      <div v-for="subItem in dateItem.children" >
        <UserDefinedModelParent :model.sync="subItem.model" >
<!--          <el-input v-model="subItem.model.name" ></el-input>-->
          <UserDefinedModelInput name="name" v-model="subItem.model.name" :stringAttr="subItem.model.name" ></UserDefinedModelInput>
        </UserDefinedModelParent>
      </div>
    </div>
  </div>
</template>

<script>
  import UserDefinedModelInput from '../packages/input/src/UserDefinedModelInput';
  import UserDefinedModelParent from '../packages/input/src/UserDefinedModelParent';
  export default {
    name: 'App',
    components: {
      UserDefinedModelInput,
      UserDefinedModelParent,
    },
    data() {
      return {
        checkItem: 'check',
        dateItemList: [
          {
            date: '2024-01-22',
            children: [
              {
                biz: 'math',
                model: {
                  name: 'check'
                }
              }
            ]
          }
        ],
      };
    },
    computed: {},
    created() {
    },
    mounted() {
      let _this = this;
      setTimeout(function() {
        _this.checkItem = 'updated check';

        // case1, direct update
        // _this.dateItemList[0].children[0].model.name = 'updated check';

        // case2, set [], then update first element, Vue not recreate UserDefinedModelInput Element, and didnt' update injected model
        _this.dateItemList = []
        _this.dateItemList.push({date:'2024-01-23',children:[{biz:'math',model:{name:'updated check'}}]})
        console.log(_this.dateItemList[0].children[0].model);

        // case3, set[], then update first element delay, Vue recreate UserDefinedModelInput Element
        // _this.dateItemList = []
        // setTimeout(function() {
        //   _this.dateItemList.push({date:'2024-01-22',children:[{biz:'math',model:{name:'updated check'}}]})
        //   console.log(_this.dateItemList[0].children[0].model);
        // }, 500)

      }, 5000);
    },
    methods: {
      handleClick($event, item) {
        console.log(' clicked item ', $event, item);
      }
    }
  };
</script>

<style>

</style>

功能父组件

这里主要是为了 provide 一个 model 出来, 构造问题现场

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'UserDefinedModelParent',
        provide() {
            return {
                model: this.currentModel
            };
        },
        computed: {
            currentModel: {
                get() {
                    return this.model;
                },
                set(val) {
                    this.$emit('update:model', val);
                },
            },
        },
        props: {
            model: {
                type: Object,
                default: () => {
                    return {};
                }
            }
        }
    };
</script>

<style scoped>

</style>

功能子组件

<template>
  <el-input ref="comp"
        :class="[this.align, this.stringAttr]"
        :type="currentType"
        :clearable="clearable"
        :rows="rows"
        :maxlength="currentMaxLength"
        :show-word-limit="showWordLimit"
        v-model="fieldValue"
        v-bind="$attrs"
        v-on="$listeners"
        @focus="myFocus" @change="change" @clear="_clear"
  >
    <template v-slot:prefix>
      <slot :name="prefix">
        <i v-if="prefix" class="slot" :class="prefix"></i>
      </slot>
    </template>
    <template v-slot:suffix>
      <slot :name="suffix">
        <i v-if="suffix" class="slot" :class="suffix"></i>
      </slot>
    </template>
    <template v-slot:prepend>
      <slot :name="prepend">
        <i v-if="prepend" class="slot" :class="prepend"></i>
      </slot>
    </template>
    <template v-slot:append>
      <slot :name="append">
        <i v-if="append" class="slot" :class="append"></i>
      </slot>
    </template>
  </el-input>
</template>

<script>
  import Base from './UserDefinedModelBase';

  export default {
    name: 'UserDefinedModelInput',
    props: {
      value: [String, Number],
      maxlength: [Number, String],
      showWordLimit: {
        type: Boolean,
        default: false
      },
      type: String,
      textarea: Boolean,
      rows: Number,
      prefix: String,
      suffix: String,
      prepend: String,
      append: String,
      align: String,
      enter: {
        type: Boolean,
        default: true
      },
      stringAttr: String
    },
    computed: {
    },
    data() {
      return {
        currentType: this.type === 'number' ? '' : this.type,
        currentMaxLength: '',
        ifEnter: false
      };
    },
    created() {
      console.log(" UserDefinedModelInput is created  ... ")
      if (this.textarea) {
        this.currentType = 'textarea';
      }
      if (this.maxlength) {
        this.currentMaxLength = this.maxlength;
      } else if (this.maxlength === undefined) {
        if (this.currentType === 'textarea') {
          this.currentMaxLength = 10000;
        } else {
          this.currentMaxLength = 50;
        }
      }
    },
    mixins: [Base],
    mounted() {
      this.extendMethods(this.$refs.comp, ['focus', 'blur', 'select']);
    },
    watch: {
      fieldValue: {
        deep: true,
        handler(newVal, oldVal) {
          this.$nextTick(() => {
            if (this.ifChanged || this.$attrs.disabled) {
              if (newVal !== oldVal) {
                this.confirm();
              }
            }
          });
        }
      }
    },
    methods: {
      myFocus() {
        this.placeholder = '';
        console.log(this.model)
      },
      change() {
        this.ifChanged = true;
        this.confirm();
      },
      _clear() {
        this.ifChanged = false;
      },
    }
  };
</script>
<style lang="scss" scoped>

</style>


功能子组件依赖的 Base.js 
import {cloneDeep, isEqual, set} from 'lodash';
import {extendMethods, getLabelByValue} from './index';
// import {mapActions} from "vuex";

export default {
  inject: {
    model: {
      default: null
    }
  },
  props: {
    value: [String, Number],
    label: String,
    name: String,
    defaultValue: [String, Array, Object, Date, Boolean, Number],
    keyMap: {
      type: Object,
      default: () => {
        return {};
      }
    },
    clearable: {
      type: Boolean,
      default: true
    },
    /**
     * 是否选中array第一个
     * */
    defaultFirst: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    confirmByChange: {
      type: Boolean,
      default: true
    },
    separator: {
      type: String,
      default: '，'
    }
  },
  watch: {
  },
  data() {
    return {
      ifChanged: false,
      loading: false,
      getLabelByValue,
      refreshKey: null,
      keyMaps: {
        label: 'label',
        value: 'value',
        ...this.keyMap
      }
    };
  },
  computed: {
    fieldValue: {
      get() {
        if (this.model) {
          if (this.model[this.name] !== undefined) {
            return this.model[this.name];
          }
          return this.getDefaultValue();
        } else {
          return this.value || this.getDefaultValue();
        }
      },
      set(val) {
        if (this.model) {
          const model = cloneDeep(this.model);
          set(model, this.name, val);
          if (!isEqual(this.model, model)) {
            set(this.model, this.name, val);
          }
        } else {
          this.$emit('input', val);
        }
      }
    }
  },
  created() {
  },
  methods: {
    extendMethods(ref, names = []) {
      return extendMethods(this, ref, names);
    },
    getDefaultValue() {
      return this.value || '';
    }
  }
};

问题的现象是假设我把业务组件中的 UserDefinedModelInput 换成 el-input, 测试用例中的更新是可以正常同步到视图的

假设吧 el-input 更新成 UserDefinedModelInput 可以看到视图就不会动态更新了, 这个一直让我很疑惑, 因为我这里也使用了 v-model 绑定 subItem.model.name 按道理来说父子组件应该同步的基本上都会同步呢

但是实际情况不是, 我们这里来看一下

inject 变量的初始化

这个过程是在 Vue组件初始化的时候, 会执行的, 采集这部分的 inject 变量

从这里上下文可以看到这里 model 的数据是从 Parent 中获取的

然后这里 result 是新建的一个对象然后对象是从 Parent 中获取的

问题的调试?

在子组件打上一个断点看一下上下文

可以看到的是子组件的 model 还是原来的, 父组件的 model 是更新之后的

然后子组件中和 el-input 绑定的 fieldValue 的取值是来自于 inject 的 model

这个不同步和 provide, inject 机制有关系, inject 的变量会在 VueComponent 的时候初始化一次, 并且inject外层是 vue 这边新建的一个对象

通过 v-model 绑定的 value 的数据是被 Vue 这边动态更新了的

这个问题的一个比较核心的关键点也就在这里, 所以一些解决的方式也是围绕着这个来的

根据上面 inject 变量的初始化, 初始化为最开始的 _this.dateItemList[0].children[0]

然后后面业务这边执行清空, 然后 push 了一个新的元素, Vue 这边判断这个 UserDefinedModelInput 可以不用重新创建, 因为 UserDefinedModelInput 中的 v-model 和 stringAttr Vue 这边自己会主动的去做响应式更新, 比如如下看到的 value 的值, 以及 el-input 的 dom 上面的 class 的数据

但是会造成的差异就是这里父组件的 model 响应式更新了, 但是子组件这边没有重新创建, 然后依然保留的是更新之前的 _this.dateItemList[0].children[0] 其值还是为为 “checked”

所以以上这些就是解决问题的一些思考的地方