# Storybook 6.0(Args)

- [Storybook 是什麼](#Storybook-是什麼)
- [新版的 Storybook](#好用擴充介紹)
- [巨集使用](#巨集使用)
- [結語](#結語)
-

import { ref, computed, watch, onMounted } from "vue";

// Let's "SETUP" !
const VueAppV3 = {
  setup() {
    // data
    const count = ref(0)
    // computed
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, v => console.log(v))
    // lifecycle
    onMounted(() => console.log('mounted!'))

    return { count }
  }
}

- [前言](#前言)
- [語法比較(以 Todo 為例)](#語法比較-\(以-Todo-為例\))
- [Vue-cli 4 與 Vite](#Vue-cli-4-與-Vite)
- [結語](#結語)
- [參考資料](#參考資料)

## 前言

Vue 2.x 由於對 TypeScript 支援度相當有限，作者尤雨溪團隊決定在 3.0 做一些改革。
所以即將到來的 Vue 3.0，除了優化了對 TS 的支援，也連帶優化對 Object 的響應機制，並移除一些不必要的語法。

而俗話說，天下三分，分久必合，
**React** 約莫在一年前推出了 **React Hook**(useState, useRef..., etc)，
**Vue** 也立即跟上，將 RFC 部分 API 改為 Vue Composition API，故可稱 Vue Hook
寫起來類似 React Hook 但又非完全相同，且有更勝於 React 機制的地方

## 語法比較(以 Todo 為例)

### Vue 2.x(Option API):

export default {
  data() {
    return {
      todo: "",
      items: ["Vue", "is", "Awesome"]
    };
  },
  methods: {
    add() {
      if (this.todo) {
        this.items.push(this.todo);
        this.todo = "";
      }
    },
    remove(item) {
      this.items = this.items.filter(v => v !== item);
    }
  },
  mounted() {
    console.log(`mounted !`);
  }
};

### Vue 3.0(Composition API):

import { ref, onMounted } from "vue";

export default {
  setup(props, context) {
    const todo = ref("");
    const items = ref(["Vue", "is", "Awesome"]);

    const add = () => {
      if (todo.value) {
        items.value.push(todo.value);
        todo.value = "";
      }
    };

    const remove = item => {
      items.value = items.value.filter(v => v !== item);
    };

    onMounted( () => {
      console.log(`onMounted !`);
    });

    return {
      todo,
      items,
      add,
      remove
    };
  }
};

| 語法 | 講解 |
| -------- | -------- | -------- |
| onMounted, onUpdated, onUnmounted | 通通都需要 import |
| ref() | 定義一個需要 reactive 追蹤的變數，返回 object，通過 **.value** 才能取得 value；**Primitive data type** only |
| reactive() | 概念同上，主要給 **Object** 使用，類似 Vue.observable |
| computed() | 概念同 Vue 2.X |
| watch() | 概念同 Vue 2.X |
| watchEffect() | 不需加 dependencies 的 watch |

### 範例

https://codesandbox.io/s/dark-platform-pthhw?file=/components/TodoV3.vue

| 使用細節 \ 版本 | Vue 2 | Vue 3 |
| -------- | -------- | -------- |
| 取得組件內資料 | this.xxx | setup() 區塊中無需使用 this |
| 邏輯切分 | mixins, renderless component | 可在 setup 以不同 function 區分組件內不同邏輯區塊 e.g. useLogin, useWindowScroll |

#### 預期調整後邏輯區塊關係圖

### 延伸產物

[VueUse - Vue Hooks library](https://vueuse.js.org/)

作者為 antfu，也做了厲害的「[文言文編程](https://github.com/wenyan-lang/wenyan)」及「[icones](https://icones.js.org/)」

---

## Vue cli 4與 Vite

伴隨著 Vue 3.0 的誕生，新的工具也隨之而來，除了往上升的 Vuecli，Vue 作者所製作的 Vite 也一同出場，主打 ESM (ES Modules)專案的快速 run && build，並可跨框架(React 也可使用)

### 什麼是 Vite?
> Vite 結合了 build tool 跟 dev server，就像是 webpack，特色是很快

上方的範例就是使用 Vite，基本上使用與 Webpack 相當接近，是新興的替代工具

[Vite Github頁面請點我](https://github.com/vitejs/vite)

---

## 結語

目前版本已是 rc 階段(3.0.0-rc8)，
正因為是 additional 的 API，所以即使是 3.0 版，目前也仍可以繼續用原本的寫法，
有空可以在專案中用用看~

## 參考資料
* [Vue 3.0 起手式](https://medium.com/@milkmidi/vue-3-0-%E8%B5%B7%E6%89%8B%E5%BC%8F-3aff464fc27a)
* [Vue3 究竟好在哪里？（和 React Hook 的详细对比）](https://juejin.im/post/6844904132109664264)
* [VUE 3 COMPOSITION API: REF VS REACTIVE](https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/)
* [Vite 怎麼能那麼快？從 ES modules 開始談起](https://blog.techbridge.cc/2020/08/07/vite-and-esmodules-snowpack/)