Vue.extend 存在的问题

Question

在 Vue2 中，Vue.extend 将组件转化为构造函数，通过实例化生成组件实例。因此我们可以通过函数调用的方式生成业务所需要的一些弹窗性质的组件。

通过平时的业务积累，我总结了些使用这种方法存在的一些不足支持。

生命周期问题

在 new 构造函数的时候生成了组件的实例，这个时候就已经触发了 created hook。 当我们通过函数将参数传递给实例后再挂载到 dom 时，发生在 created 中需要 props 值进行的相关操作都无法获得正常的 props 值。

如果有需要在生命周期调用函数使用 props 值的业务场景，我们需要将事件都放在 mounted 中，才能正常运行。

---

后面又发现了这个 propsData 属性，可以当作参数传入构造函数中，这样初始化时的 prop 值就是正确的值了。

this 问题

之前遇到过 函数方式生成的组件中， this 获取不到自定义挂载到 prototype 上的属性。原因也很简单，入口文件使用的 Vue 和 Vue.extend 使用的 Vue 不是同一个 Vue.所以在原型上找不到挂载的数据。

可以通过只引入一次，然后分别提供给入口和 Vue.extend 使用，就能解决这个问题，我在使用 webpack5 的 Module Federation 时并未遇到这种情况，可能是由于在模块导出时直接声明了 Vue 为外部依赖，导致使用了同一个 Vue, 所以才没出现这个问题。

Router 和 Store

由于 Router 和 Store 是主应用在实例化时应用的，然后将 $store 属性和 $router 属性只有主应用的 Vue 下的组件 vm 才拥有该属性，使用 Vue.extend 生成的组件由于不再主应用的 tree，因此获取不到对应属性。

function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }