用于扩展组件的数据时，扩展组件的数据未定义

Question

假设我有一个组件（单文件组件）：

// Cat.vue
export default {
    data() {
        return {
            actionsPredefined: {
                eat () => (console.log('eat')),
                purr () => (console.log('purr')),
                meow () => (console.log('meow')),
            }
        }
    }
}

扩展：

// Lion.vue
export default {
    extends: Cat,

    data() {
        return {
            actions: {
                eat: this.actionsPredefined.eat, // is undefined - why?
                purr: this.actionsPredefined.purr, // is undefined - why?
                roar () => (console.log('roar'))
            }
        }
    }
}

现在当我使用 Lion.vue 时，我得到：

[Vue 警告]：data() 中的错误：“TypeError：无法读取属性‘吃’的 未定义”

所以看起来this.actionsPredefined 在 Lion.vue 中是未定义的。

这里有选择地将扩展组件（Cat.vue）的actionsPredefined与扩展组件（Lion.vue）的actions合并的正确方法是什么？

在 Lion.vue 中，当我将 actions 从 data 移动到 computed 时，Vue 知道 this.actionsPredefined 是什么，但我无法将其移动到 computed（因为我需要能够更改 @987654333 @ 通过其他方法并更改计算值...显然违背了使用计算值的想法并且不起作用）。

我还可以将Lion.vue 数据中的actions 设置为空，然后仅在created() 钩子中使用predefinedActions 填充它们，它会起作用，但不知何故，它感觉不是正确的方法。

Answer 1

Vue 调用子组件 (Lion) 的 data 函数在 它调用超级组件 (Cat) 的 data 函数之前。 Cat 中定义的数据属性届时将无法在实例上使用。

我也可以在 Lion.vue 数据中设置空的 actions 并仅在 created() 钩子中填充它们，它会起作用，但不知何故它感觉不是正确的方法。

为什么不呢？如果在data 钩子中初始化actions 与created 钩子有什么区别？

Answer 2

我已经做了自己的测试，这是我发现的

如果您不在子类上创建 data 对象，则扩展可以正常工作，即：

//Lion
<script>
import Cat from './cat';

export default {
  extends: Cat,
  created() {
    this.actionsPredefined.purr(); //this prints purr
  }
}

</script>

如果您将data 及其继承属性定义为箭头函数，它也可以正常工作，即：

<script>
import Cat from './cat';

export default {
  extends: Cat,
  data() {
    return {
      actions: {
        eat: () => this.actionsPredefined.eat(), 
        purr: () => this.actionsPredefined.purr(),
        roar: (console.log('roar'))
      }
    }
  },
  created() {
    this.actions.eat(); // eat
    this.actions.purr(); // purr
    this.actions.roar; // roar
  }
}

</script>

还有 Cat 组件：

<script>
  export default {
    data() {
      return {
        actionsPredefined: {
          eat: () => (console.log('eat')),
          purr: () => (console.log('purr')),
          meow: () => (console.log('meow')),
        }
      }
    }
  }
</script>