# vue composition api
https://github.com/vuejs/composition-api
option api 跟 composition api的寫法很不同。

目前的感受是，option api的程式邏輯太分散了，雖然可以很快找到 component 用到的資料方法，但是沒辦法把相關的資料及方法放在一起。

## 嘗試當作 mixin 使用
目前還在嘗試寫成mixin的形式，但結果看起來跟mixin一樣，在component裡面很難快速找到程式寫在哪裡。

## option api 寫法很適合 component
如果是共用的元件，通常不太會有複雜的流程，option api寫法可以很快地找到component用到的功能等等

## composition api

### 要把 composition api 做共用怎麼做
要用composition api做共用的事情，其實把它當mixin寫不合適

應該要把功能拆出來寫成hooks，需要哪個功能再去引入該hooks

寫成hooks這段，你可以看這個repo最下面他有分析mixin跟hooks
https://github.com/ShetlandJ/Vue3Todo

範例的code寫在這裡
https://github.com/ShetlandJ/Vue3Todo/blob/master/src/hooks/useTodos.js

### 目前購物車的 code 太複雜且龐大
option api的壞處是看不出相關程式的邏輯，必須反覆跳躍著看才懂什麼時候做什麼事情。

要盤點購物車實際運作的時候會做哪些事情
跟store相關的動作可以拆出來寫成hooks

### devtools 看不到相關參數
可以成功運作setup但是沒辦法在devtools看到我定義的資料（後來發現我裝的是min.js，就不會出現在devtools了）

## vue 2.7
vue 2.7 突然發布，主要是可以更新使用composition api，本來是打算用2.6+composistion api來實現，現在可以無痛使用了，不過目前在vue2.7寫composistion api，相關的參數沒辦法在vue devtools裡面看到，加上每天都還有新增小版號，露天要升上去可能要再等等。

## vue 2.7 與 composition api

### steup 取得 Vue 的 instance
vue 2.7 的 setup 沒辦法直接拿 vue 的 instance，要透過getCurrentInstance() 才拿得到

composition api 可以從 setup(props, context) 的 context.root 拿到

### 方法在不同的地方
假如要使用ref, computed這些方法

vue 2.7 可以直接從 Vue 取得
composition api 必須從 VueComposistionAPI 取得

### devtools支援度
用vue-2.7.10.min.js的話會看不到東西(生產環境），要用vue-2.7.10.js（開發環境）
~~vue 2.7 的相關參數還沒辦法在vue devtools看到，要再等等~~
composition api可以