[Vue.js] 关于组合 API

什么是组合 API？

它是从 Vue.js 3 系列引入的一种新的组件创建方法。

与 React Hooks 一样，它允许您隔离逻辑和状态。

另一方面，创建统一描述组件外观、状态和逻辑的 SFC 文件的传统方法称为选项 API。

由于 Options API 允许您一次编写所有代码，因此不能进一步划分它是很不方便的。

Composition API 通过提取与逻辑和状态相关的代码，消除了 Options API 的不便。

此外，通过与可视代码分开管理，增强了逻辑的可重用性。

但是，Composition API 不会替换或弃用 Options API，它可以互换使用。

Composition API 适用于需要在组件之间共享状态和逻辑的大型应用程序开发。

样本

我使用 Composition API 创建了以下简单应用程序。

• 可以输入名称
• 可以增加/减少数字
• 这些都是被动反映的

角色如下。

• Main.vue：组件输入名称和编号，调用其他组件
• Score.vue：显示数字的组件
• JudgeName.vue：显示名称的组件
• use-judge.js：提取值状态和增加或减少值的逻辑的文件

主.vue

<template>
  <div>
    <p>審査員名を入力</p>
    <input type="text" v-model="state.judgeName" />
    <p>得点を設定</p>
    {{ state.score }}
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
  <div class="body">
    <Score />
    <JudgeName />
  </div>
</template>

<script>
import { provide } from "vue";
import Score from "./Score.vue";
import JudgeName from "./JudgeName.vue";
import { useJudge } from "../functions/use-judge.js";

export default {
  components: {
    Score: Score,
    JudgeName: JudgeName,
  },
  setup() {
    const { state, increment, decrement } = useJudge();

    provide("inputState", state);

    return {
      state,
      increment,
      decrement,
    };
  },
};
</script>

<style scoped>
省略
</style>

评分.vue

<template>
  <div class="score">
    <p class="text" :class="{ low: state.score < 90 }">
      {{ state.score }}
    </p>
  </div>
</template>

<script>
import { inject } from "vue";

export default {
  setup() {
    const state = inject("inputState");
    return {
      state,
    };
  },
};
</script>

<style scoped>
省略
</style>

法官姓名.vue

<template>
  <div class="judgeName">
    <p class="text">
      {{ state.judgeName }}
    </p>
  </div>
</template>

<script>
import { inject } from "vue";

export default {
  setup() {
    const state = inject("inputState");
    return {
      state,
    };
  },
};
</script>

<style scoped>
省略
</style>

使用-judge.js

import { reactive } from "vue";

export const useJudge = () => {
  const state = reactive({
    score: 89,
    judgeName: "山田"
  });

  const increment = () => {
    if (state.score >= 100) return;
    state.score++;
  };

  const decrement = () => {
    if (state.score <= 0) return;
    state.score--;
  };

  return {
    state,
    increment,
    decrement
  };
};

设置功能

组合 API 在 setup 函数中设置数据和方法。

流程是返回您设置的内容并在模板中使用它。

状态和逻辑的提取

这一次，状态和逻辑在文件use-judge.js 中被剪掉了。 （状态，递增，递减）

这些由Main.vue 使用。

主.vue

const { state, increment, decrement } = useJudge();

此描述允许您在Main.vue 中使用状态、增量、减量。

反应性数据

在这个应用程序中，输入名称和数值被反应性地反映。

如果您想在 Composition API 中使用响应式数据，则提供了 ref 和 reactive 方法。

use-judge.js 使用 reactive 定义 score 和 JudgeName。

提供/注入

我也会介绍Provide/Inject，虽然不是3系独有。

use-judge.js 定义状态，Main.vue 使用它。

为了显示这个状态，Score.vue 和JudgeName.vue 必须共享这个状态。

Provide/Inject 正在实现这一点。

首先，将要共享的值传递给其他组件来提供。

主.vue

provide("inputState", state);

左边是键名，右边是你要分享的值。

然后使用Inject获取Provide中设置的值。

评分.vue

const state = inject("inputState");

您可以通过指定在 Provide to Injuct 中设置的键名来获取该值。

参考

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308627079.html