标签: vue-options-api

是否可以安装 Vue 3，但仍以“Vue 2”方式执行操作？换句话说，我看到 Vue 3 具有新的 Composition API，但这是可选的还是 Vue 3 中必需的处理方式？

出于某种原因，我认为 Vue 3 仍然允许您以 Vue-2 的方式做事，而是使用 Options API。难道不是这样吗？谢谢。

我正在构建一个电子商务网站，并为产品卡创建了一个组件。我将该组件导入到主页中，以便可以显示产品列表。我在 data(){} 中声明了一个products变量 ，并创建了一个 beforeMount 并将我的逻辑放入其中以使用 axios 获取数据。

<template>
  <div>
      <section class="new__products"> 
      <div class="container">
        <div class="inner-new-products">
          <home-page-title title-text="New products"></home-page-title>
          <div class="product-cards">
            <product-card
              v-for="(product, index) in products"
              :key="index"
              :product-id="product._id"
              :old-price="product.old_price"
              :new-price="product.new_price"
              :product-image="product.product_image.reverse()[0].url"
              :product-desc="product.product_description"
              :product-name="product.product_name"
            ></product-card>
          </div>
          <!-- :product-link="product.productLink" -->
        </div>
      </div>
    </section>
  </div>
</template>
<script lang="ts">
export default defineComponent({
  name: "Home",
  components: { ProductCard },
  data() {
     let products: { productId: string, productImage: string, productDesc: string, 
                     newPrice: number, oldPrice: number }[] = [];
     return { products };
  },
  async …

我维护着一个相当大的 vue2 项目，其中使用了 Vuetify、vue-class-component、vue-property-decorator 和 typescript 等库。示例组件：

\n （为了显示语法，该组件被简化且不可编译）

我们对这个设置非常满意，因为语法简单，它\xc2\xb4s对于新的和现有的开发人员来说很容易理解，并且因为\xc2\xb4t中的这个设置没有任何真正的问题\xc2\xb4s目前寿命为 2-3 年。\n对 vue2 的官方支持即将结束，我们希望升级到 vue3。现在我们的问题是我们应该走哪条路，以及什么是可能的。我\xc2\xb4已经研究了一段时间了，但仍然对该主题感到困惑。vue3 中的 Composition API 的制定是有原因的，人们似乎普遍对它感到满意，但我很难理解这一点。除了一些很酷的新功能之外，Composition API 对我来说似乎是一种降级，因为它不容易理解、“冗余”，而且语法过于明确。举几个例子：

道具：

Vue2\n@Prop({ default: \'\' }\nlabel!: MyProp;\n\nVue3\nprops: {\n  myProp: {\n    type: Object as PropType<MyProp>, //Kind of weird explicit type definition \n    default: \'\'\n  },\n}\n

变量（函数也是如此）

Vue2\nmyValue: string = ""; //Reactive and available in the template\n\nVue3\nsetup(props, context) { //Must be setup in the setup function to make it available in the template\n  const myValue: Ref<string> …

我知道 Vue 3 的主要功能之一是 Composition API，它是旧的 Vue Options API 的替代品。但我似乎找不到 Options API 的简单文本定义 - 它是什么？

我正在尝试使用beforeCreate在main.js. 这段代码在 Vue 3 中的等价物是什么？

new Vue({
  el: '#app',
  router,
  components: { App },
  store: store,
  beforeCreate() { this.$store.commit('initialiseStore');},
  template: '<App/>'
})