什么是 Vue 选项 API？

Question

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

Answer 1

简而言之，我在评论中发布的blog article about composition vs. options API：

// Options API
export default {
  data() {
    return {
      name: 'John',
    };
  },
  methods: {
    doIt() {
      console.log(`Hello ${this.name}`);
    },
  },
  mounted() {
    this.doIt();
  },
};

// Composition API
export default {
  setup() {
    const name = ref('John');
    
    const doIt = () => console.log(`Hello ${name.value}`);
    
    onMounted(() => {
      doIt();
    });
    
    return { name };
  },
};

Options API 是 Vue2 中“旧”方式的名称。据我所知，您仍然可以像使用 Vue2 的旧时代一样使用两者。

在搜索 "vue 选项 api"" 时，我不得不点击第 6 个 link - 在搜索结果中非常靠后，但是在至少不是不可找到的（a.k.a。Google 搜索结果，第 2 页）。

什么是 Vue 选项 API？

What is the Vue Options API?

vue.js

vuejs2

vue-options-api