Question

我有一些Vue插件，例如分析，哨兵等，它们需要来自服务器的配置数据来进行设置。

我必须请求配置，然后执行Vue.use()，最后，致电new Vue() instance。我认为它可以做出一些性能上的努力，因为Vue.$mount创建了许多DOM元素并运行了javascript逻辑，并且发生在XHR请求/响应之后。所以我的问题是：什么是解决所描述问题的最佳解决方案，模式？

我可以避免获取配置数据吗（也许在构建过程中由webpack将数据放在某个静态文件中（数据存储在MySQL中）或者也许可以在创建Vue实例后使用Vue.use？

Answer 1

我更喜欢避免在服务器中获取配置数据。在我的选择中，您必须将配置放入静态文件中以使用Webpack进行构建。

但是我会回答你的问题：创建Vue实例后，Vue没有关于加载插件的限制。工作。

请参见下面的示例。

<template>
  <div>
    <button type="button" @click="installPlugin">install plugin</button>
    <button type="button" @click="callPlugin">call plugin</button>
  </div>
</template>

<script>
import Vue from 'vue';

export default {
  name: 'app',
  methods: {
    installPlugin() {
      Vue.use({
        install(Vue, options) {
          console.log('plugin was installed');

          Vue.prototype.$test = () => {
            console.log('plugin was called');
            return 'run-test';
          };
        },
      });
    },
    callPlugin() {
      this.$test();
    },
  },
};
</script>

在此示例中，可以在创建Vue实例后安装并调用Vue插件。

实例挂载后添加插件（Vue.use）（新的Vue（）。$ mount（））

1 个答案: