VueJS自动创建嵌套对象属性以简化代码的技术问询

我完全理解你的痛点：当NoSQL数据源返回的JSON里缺少中间嵌套对象（比如objB）时，直接绑定store.objA.objB.prop1会触发"Cannot read property 'prop1' of undefined"的错误，而且你既不能用v-if隐藏组件，手动初始化所有属性又太繁琐。下面给你一个完美的Vue原生解决方案——实现一个无需重复路径的v-autocreate自定义指令。

核心思路 #

这个指令会自动解析组件上的绑定表达式（比如:value.sync里的路径），在组件渲染前逐层检查并创建缺失的嵌套对象，用vm.$set确保属性是响应式的，完全不用你重复写路径。

自定义指令实现 #

Vue.directive('autocreate', {
  bind(el, binding, vnode) {
    // 提取元素上所有带.sync修饰的绑定表达式
    const targetExpressions = vnode.data.directives?.filter(dir => {
      return dir.name === 'bind' && dir.modifiers.sync;
    }).map(dir => dir.expression) || [];

    // 可扩展支持普通绑定（不带.sync），只需添加对应判断
    // const normalBindings = vnode.data.directives?.filter(dir => {
    //   return dir.name === 'bind' && !dir.modifiers.sync;
    // }).map(dir => dir.expression) || [];
    // targetExpressions.push(...normalBindings);

    targetExpressions.forEach(expr => {
      // 拆分路径为数组，比如"store.objA.objB.prop1" → ["store", "objA", "objB", "prop1"]
      const pathSegments = expr.split('.');
      let current = vnode.context.$data;

      // 遍历路径（除最后一个属性，只创建中间嵌套对象）
      for (let i = 0; i < pathSegments.length - 1; i++) {
        const segment = pathSegments[i];
        if (!current[segment]) {
          // 用$set创建响应式空对象
          vnode.context.$set(current, segment, {});
        }
        current = current[segment];
      }
    });
  }
});

使用方式 #

直接在组件上添加v-autocreate指令，不用重复写路径：

<my-selector v-autocreate :value.sync="store.objA.objB.prop1">
</my-selector>

当objA或objB不存在时，指令会自动帮你创建这些嵌套对象，确保绑定不会报错，同时保持响应式。

扩展说明 #

1. 支持普通绑定：如果需要处理不带.sync的:value绑定，只需取消注释代码里的普通绑定提取逻辑即可。
2. 全局属性处理：如果你的路径是从Vue实例的根属性（而非$data）开始，只需把current = vnode.context.$data改成current = vnode.context。
3. 备选方案（计算属性）：如果不想用指令，也可以用计算属性配合可选链（Vue 2需借助Babel或组合API）：

computed: {
  prop1: {
    get() {
      return this.store?.objA?.objB?.prop1;
    },
    set(val) {
      // 手动创建缺失对象
      if (!this.store.objA) this.$set(this.store, 'objA', {});
      if (!this.store.objA.objB) this.$set(this.store.objA, 'objB', {});
      this.store.objA.objB.prop1 = val;
    }
  }
}

然后绑定:value.sync="prop1"，但这种方式需要为每个属性单独写计算属性，灵活性不如指令。

内容的提问来源于stack exchange，提问作者Micaël Félix