Day_14 : 让 Vite 来开启你的Vue 之 Composition API

Hi Dai Gei Ho~ 我是Winnie～

在今天的内容中，此篇文章将要来说 Composition API，而在开始之前 我们先来看看下图的 Before/After

而从上图中我们可以看到，相较於左边 Option API 各个相同程序逻辑(颜色)分散至不同属性中， 在Vue3 的 Composition API 内的 编写方式
主要 是 根据逻辑相关性来组织的(相同颜色一起)，也就是将 一个功能的 所有 属性放置在同个容器之中，来做到『高内聚，低耦合』的效果。

同时 也可以让程序码 提高 可读性 和 维护性，并且让能重复被使用

ps 『高内聚，低耦合』 的意思 是元件内的资料相关性高，而元件与元件之间的相互依赖性低。

原理说完了，接着我们 来看看 Composition API 的基础结构吧

以计数器 为例：

<tempalte>
 <div>{{count}}</div>
 <button @click="increment">+1<button/>
 <button @click="double">double<button/>
</tempalte>
<script>

//  App.vue
import { ref, computed } from "vue";
export default {
  setup() {
    const count = ref(0); // 定义Count初始值
    const double = computed(() => count.value * 2)
    const add = () =>{
     count.value ++
    }
    
    onMounted(
        console.log('i m counter')
    )
    
    return { //这里 将方法与资料 回传给 <template> 使用
      count,
      add,
      double
    }
  }
}
</script>

从以上程序码中 我们可以看到，不同於 先前 Option API 写法，setup()函式 为 Compostion API 元件 状态或资理的主要核心 ，其中不管是 资料状态、 computed或是生命周期等 都会在 setup()中来进行定义及处理，同时 因为没有data 的属性可以使用，原本的资料 初始定义 也需透过ref()/reactive来进行宣告，最後将<template> 所需要使用到的 资料 或 方法 回传出来使用。

而这样的程序结构，就是Composition API的编写方式。

功能与逻辑重复使用

同时 针对功能与逻辑重复使用 Compostion API 也能有效地处理，

再以 以计数器 为例：

//Counter.js

import { ref } from 'vue';

export default function() {
   const count = ref(0);
   const double = computed(() => count.value * 2)
   const increment = () =>count.value ++ }
    
  return {
    count,
    double,
    add
  };
}

//  Component1

<script>

import Counter from './Counter.js';
import { ref, computed } from "vue";
export default {
  setup() {
     
     const {   
         count,
         double,
         add
    } = Counter();
    
    return { //这里回传给 <template> 使用的 资料
      count,
      add,
      double
    }
  }
}
</script>

//  Component2.vue

<script>

import Counter from './Counter.js';
import { ref, computed } from "vue";

export default {
  setup() {
     const num = ref(0)
     const add =()=>{
      num.value ++
     }
 
     const {   
         count,
         double,
         add: addCount // 因为与元件内的add方法重复了，所以换个名字
    } = Counter();
    
    return { //这里回传给 <template> 使用的 资料
      count,
      addCount,
      double,
      add
    }
  }
}
</script>

从上范例我们可以看到，不同於第一个计数器，我们可以将 计数器 的 相同状态 及方法逻辑抽出来，并透过import的方式 将 相同逻辑功能 引入到各 Component1 Component2中，达到重复使用的目的，同时也可以解决 过去mixins 产生命名冲突错误 资料混肴不清 的问题了。

以上就是关於 Composition API 的基本介绍，而在接下来几篇文章中，我们将 深入来介绍 Compositon API 的经常会使用到的 API使用方式。