不能在带有 Webpack 的 Vue 3 中使用 Options API

Question

我对 Vue 3 中的选项 API 有疑问，这可能特定于我使用 Webpack 5 的实现。从文档和文章看来，在 Vue 3 中你可以同时使用 'old' 选项 API 和 'new' 组合 API 在 Vue 3 中可以互换。

然而，当我的 Vue 3 应用程序中有以下代码时：

<template>
  <div class="blog-overview__filters">
    <button @click="filter()" class="filter filter__option">Click me</button>
  </div>
</template>

<script>
export default {
  name: "Filters",
  methods: {
    filter() {
      console.log('Hello')
    }
  }
};
</script>

我收到以下警告： Unhandled error during execution of native event handler $options.filter is not a function

当我使用 Composition 的设置功能时 API 它工作正常：

export default {
  name: "Filters",
  setup() {
    const filter = () => {
      console.log('Hello')
    }
    return {
      filter
    }
  }
};

其他选项 API 方法也是如此。

以下选项 API 代码在 Vue 3 中不执行任何操作：

export default {
  name: "Blogs",
  data() {
    return {
      blogs: [],
    };
  },
  created() {
    let endpoint = "endpoints/blog-overview.json";
    axios
      .get(endpoint)
      .then((res) => {
        this.blogs = res.data.blogs;
      })
      .catch((err) => {
        console.log({ err });
      });
  },
};

但是组合 API 工作正常：

import { onMounted, ref } from "vue";

export default {
  name: "Blogs",
  setup() {
    const blogs = ref([]);
    onMounted(() => {
      let endpoint = "endpoints/blog-overview.json";
      axios
        .get(endpoint)
        .then((res) => {
          blogs.value = res.data.blogs;
        })
        .catch((err) => {
          console.log({ err });
        });
    });
    
    return {
      blogs
    }
  },
};

难道我们不能继续使用 Vue 3 中的选项 API 吗？

我的设置是： webpack: 5.65.0 vue: 3.2.26 vue-loader: 17.0.0 @vue/compiler-sfc: 3.2.26

Answer 1

我想通了，几周前，当我将我们机构项目的基本样板更新为 Webpack 5 时，我在 webpack 配置中添加了以下内容：

new webpack.DefinePlugin({
  __VUE_OPTIONS_API__: false,
  __VUE_PROD_DEVTOOLS__: false
})

但这会关闭选项 API，我相信这样可以减少包大小并提高性能。只需将 __VUE_OPTIONS_API__ 设置为 true 就可以了。

此外，我还意识到我不需要 @vue/compiler-sfc，因为我使用的是 3.2.13 或更高版本的 Vue

不能在带有 Webpack 的 Vue 3 中使用 Options API

Cannot use Options API in Vue 3 with Webpack

vue.js

vuejs3

webpack-5