vue-组合 API 与选项 API

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识！点我探索新世界！

Vue3摒弃了上一代版本的函数式API-Options API ,采用了组合式API- Composition API。Composition API允许用户像编写函数一样自由地组合逻辑和代码。

首先，通过一个例子来看一下两者的区别

例如下面同样一个功能:输出用户名

对于options api 需要在data中定义变量，在methods中定义方法。

而Composition API全部写在setup中。

// Options API
export default {
  data() {
    return {
      name: '搞前端的半夏',
    };
  },
  methods: {
    consoleUser() {
      console.log(`Hello ${this.name}`);
    },
  },
  mounted() {
    this.consoleUser();
  },
};
// Composition API
export default {
  setup() {
    const name = ref('搞前端的半夏');
    
    const doIt = () => console.log(`Hello ${name.value}`);
    
    onMounted(() => {
      consoleUser();
    });
    
    return { name };
  },
};

是什么让 Composition API 比 Options API 更好？

最简单的回答就是：代码复用

在setup内部，我们可以按逻辑关注点对部分代码进行分组。然后我们可以提取反应逻辑片段并与其他组件共享代码。

另一方面，使用 Options API，我们有两种主要的方法在组件之间共享代码：Mixins和**Renderless Components。**多亏了 Composition API，我们再也不用使用 Mixins。Mixins 使得很难确定某些逻辑部分来自使用它们的组件内部的位置。但我认为 Renderless Components 仍然是一个有价值的工具，即使有可能使用 Composables 在组件之间共享代码。

与可组合的代码共享

多亏了 Composition API，我们可以在任何地方编写响应式代码。我们不再局限于 Vue 组件的范围。我们称这些可重用的响应式代码为 Composable。

// src/composables/user-comments.js
// ...

export function useUserComments({ user }) {
  let { data: comments, error } = useSwrv(() => ({ uid: user.value.id }), commentService.findAll);
  let commentCount = computed(() => comments.value.length);
  let deleteComment = commentId => commentService.delete({ id: commentId });

  return {
    comments,
    commentCount,
    deleteComment,
  };
}
// src/components/UserProfile.vue
// ...
import { useUserComments } from '../composables/user-comments';

export default {
  name: 'UserProfile',
  // ...
  setup(props) {
    let { data: user, error } = useSwrv(() => props.id, userService.find);
    const { commentCount } = useUserComments({ user });

    // ...
  },
};

在user-commentsComposable 中，我们可以封装所有的响应式逻辑来处理评论。我们反应性地获取用户的评论，在示例中，我们还为commentCount. 我们可以在应用程序的任何地方重用这段逻辑。最有可能在 Vue 组件中，但理论上，我们也可以在 Node.js 环境中运行此代码。

使模板中的常量和依赖项可用

想象一下，需要访问<template>组件部分内的常量或某些导入的依赖项。使用 Options API 时，这感觉很尴尬。您要么必须将它们添加到您的data选项中（这可能会产生很大的性能开销），要么使用created钩子将那些非反应性变量添加到this上下文中。

多亏了 Composition API 和setup钩子，这样做感觉自然多了。我们可以从钩子中导出常量和依赖项，setup以使它们在我们的组件<template>部分中可用。

<template>
  <div>
    <button @click="create">
      Save
    </button>
    <div>(max. {{ MAX_COMMENTS }} allowed)</div>
  </div>
</template>

<script>
import { create } from '../services/comment';

const MAX_COMMENTS = 3;

export default {
  setup() {
    return {
      MAX_COMMENTS,
      create,
    };
  },
};
</script>

在 Vue 2 中使用 Composition API

如果您想在Vue2的项目中使用Composition API，不必更新Vue版本。您可以通过安装官方的 Composition API Vue 2 插件来使用Composition API。