Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Deep Dive Into Vue Composition API
Search
jiko21
October 09, 2019
Technology
0
3.2k
Deep Dive Into Vue Composition API
v-kansai#11、京都Devかふぇ#7での登壇資料です!!
jiko21
October 09, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
Creating a Next.js-style Framework with Bun and Hono
jiko21
0
78
Array Grouping will soon be arriving at TypeScript
jiko21
0
67
Copying Array Methods arrived at TypeScript
jiko21
1
530
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
110
node:test will replace Jest?
jiko21
0
69
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
290
NestJS a progressive web framework
jiko21
3
2k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
1.2k
Other Decks in Technology
See All in Technology
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
オープンソースAIとは何か? --「オープンソースAIの定義 v1.0」詳細解説
shujisado
9
1k
誰も全体を知らない ~ ロールの垣根を超えて引き上げる開発生産性 / Boosting Development Productivity Across Roles
kakehashi
1
230
The Role of Developer Relations in AI Product Success.
giftojabu1
1
130
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
390
SREによる隣接領域への越境とその先の信頼性
shonansurvivors
2
520
Platform Engineering for Software Developers and Architects
syntasso
1
520
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
B2B SaaSから見た最近のC#/.NETの進化
sansantech
PRO
0
860
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Being A Developer After 40
akosma
87
590k
Designing for Performance
lara
604
68k
Writing Fast Ruby
sferik
627
61k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
It's Worth the Effort
3n
183
27k
Ruby is Unlike a Banana
tanoku
97
11k
How STYLIGHT went responsive
nonsquared
95
5.2k
Transcript
Deep Dive Into Vue Composition API v-kansai Vue.js/Nuxt.js meetup #10
@Daikids2
খౡ େج / Daiki Kojima @Daikids2 @jiko21 ژେӃใֶݚڀՊM2 (20ଔ) ΠϯϑϥҎ֎͍͍ͩͨͳΜͰ
Vue fes JPࢀՃ͠·͢!!
ͤΜͰΜ! • KFUG 2019Ͱొஃ͠·͢!
Posted on … IUUQCJUMZ*[E#-4
Today’s Topic • What is Composition API? • How to
write… • ͪΐͬͱߴͳLogicͷ࠶ར༻
αϯϓϧίʔυ • GitHub: bit.ly/2Mgwy77 • Demo: bit.ly/2OmiuLQ
What is Composition API?
What is Composition API? • Vue 3Ͱొ༧ఆ?ͷAPI • چ໊: function-api
https://github.com/vuejs/rfcs/pull/78
Motivation of Composition API • ϩδοΫ࠶ར༻ͨ͠Γίʔυͷߏ·ΘΓ • ࠓͷAPIͩͱoptionͬͯΔ͔Βηϯε͕ཁΔ • ܕਪ
• thisʹґଘͯͯ͠ܕ͕ͭΒ͍ • IDEͱ͔ͷॿ͚͕ಘΒΕʹ͍͘… https://vue-composition-api-rfc.netlify.com/#motivation
Μ?
ܕपΓͳΒ
Class Style API͕ ͋Δ͡ΌΜ?
Vue3ʹ࠾༻͞Ε·ͤΜ… https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
Why Class Style API is dropped? • Vueࣗମɺ৭ΜͳͷΛthisʹͻͬ͘ΔΊͯΔ… • propsΛѻ͏ࡍʹσίϨʔλΛ͏ඞཁ͕͋Γɺ
ෆ࣮֬ੑ͕ଟ͍(TC39ͱͷ݉Ͷ߹͍) • TSXαϙʔτͱ߹Θͳ͍… https://vue-composition-api-rfc.netlify.com/#motivation
How to write…
४උ • ҎԼͷίϚϯυͰύοέʔδΛΠϯετʔϧ • main.ts(js)ʹҎԼͷΑ͏ʹॻ͚OK npm install @vue/composition-api --save import
Vue from "vue"; import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);
ྫ͑… • ୯७ͳTodoΞϓϦΛ ߟ͑Δ • Root Component Todo.vue
ྫ͑… • TodoՃ༻ͷϑΥʔϜ TodoForm.vue
ྫ͑… • Todoදࣔ༻ͷ List TodoList.vue
TodoForm.vueΛݟͯΈΔ <template> <div class="todo-form"> <input v-model="text"/> <button v-show="isValid" @click="submit">Add</button> </div>
</template>
ྫ͑… • ϑπʔʹॻ͘ͱ ͜Μͳ͔Μ͡? import Vue, {PropType} from 'vue'; export
default Vue.extend({ name: 'TodoForm', props: { onSubmit: { type: Function as PropType<(text: string) => void>, required: true, }, }, data() { return { text: '', }; }, computed: { isValid(): boolean { return this.text.length > 0; }, }, methods: { submit() { this.onSubmit(this.text); this.text = ''; }, }, });
ྫ͑… • ͜͏ͳΔ import {computed, createComponent, PropType, reactive} from '@vue/composition-api';
const TodoForm = createComponent({ props: { onSubmit: { type: Object as PropType<(text: string) => void>, required: true, }, }, setup(props) { const state = reactive({ text: '', }); const isValid = computed( () => state.text.length > 0 ); const submit = () => { props.onSubmit(state.text); state.text = ''; }; return { state, submit, isValid }; } });
ίϯϙʔωϯτͷ࡞Γํ • createComponentͰίϯϙʔωϯτΛ࡞ (jsͰॻ͘ͳΒexport default {}ͰOK) import {createComponent, PropType, reactive}
from '@vue/composition-api'; const TodoForm = createComponent({ ... });
ίϯϙʔωϯτͷ࡞Γํ • props͍ͭͷΑ͏ʹॻ͚·͢… import {createComponent, PropType, reactive} from '@vue/composition-api'; const
TodoForm = createComponent({ props: { onSubmit: { type: Object as PropType<(text: string) => void>, required: true, }, }, });
ίϯϙʔωϯτͷ࡞Γํ • setupؔʹ৭ʑॻ͍͍ͯ͘… • reactive: Vue.observableͷ͜ͱ dataͷΑ͏ʹ͏͜ͱ͕ଟ͍͔ • computed: ؔͷΑ͏ʹॻ͘
setup(props) { const state = reactive({ text: '', }); const isValid = computed( () => state.text.length > 0 ); ...
ίϯϙʔωϯτͷ࡞Γํ • setupؔʹ৭ʑॻ͍͍ͯ͘… • methods: ؔΛͦͷ··ఆٛ • propsprops.<name>Ͱ͏ • ࠷ޙʹreturnͰఆٛͨ͠ͷΛ
ฦ͢ setup(props) { ... const submit = () => { props.onSubmit(state.text); state.text = ''; }; return { state, submit, isValid }; } });
σϞ
ͪΐͬͱߴͳLogicͷ࠶ར༻
Logic Extraction and Reuse • ίϯϙʔωϯτͷछྨҧ͑Ͳɺڞ௨͍͍ͯͨ͠ ϩδοΫΛநग़ͯ͠࠶ར༻Ͱ͖Δɻ • ݱߦͷmixinͳͲͱಉ͡Α͏ͳ͜ͱ͕Ͱ͖Δ… https://vue-composition-api-rfc.netlify.com/#logic-extraction-and-reuse
HOW TO • Component͔Βɺ Stateͱɺmethods͚ͩΛ Ҿ͖ണ͕ͯؔ͠Ͱฦ͢ • ref: reactiveͰՄม(mutable)ͳ data
import {reactive, ref} from "@vue/composition- api"; const useTodos = () => { const todos = ref([] as string[]); const addTodo = (todo: string) => { todos.value.push(todo); }; const deleteTodo = (position: number) => { todos.value.splice(position, 1); }; return { todos, addTodo, deleteTodo, }; }; export default useTodos;
HOW TO • ͍͍ͨComponentͰ ӈهͷΑ͏ʹ༻͢Δ import {createComponent, reactive} from '@vue/
composition-api'; import TodoList from '@/components/normal/TodoList.vue'; import TodoForm from '@/components/normal/TodoForm.vue'; import useTodos from './Store'; const Todo = createComponent({ components: { TodoList, TodoForm, }, setup() { const {todos, deleteTodo, addTodo} = useTodos(); return { todos, deleteTodo, addTodo, }; }, });
σϞ
ΑΓߴͳ͜ͱ…
࣮ɺ • ͜ͷComposition APIΛ ͍͜ͳͤ ͳΜͪΌͬͯঢ়ଶཧ͕ Ͱ͖·͢ ͍ͭ͜Έ͍ͨͳͭͰ͢ https://vuex.vuejs.org/ja/ ʹ͋ΔVu◦xͷֆ
Ͳ͏Δͷ? • todosΛؔͷ֎ʹग़͢ -> 1ճ͚ͩੜ͞ΕΔ! import {reactive, ref} from "@vue/composition-api";
const todos = ref([] as string[]); const useTodos = () => { const addTodo = (todo: string) => { todos.value.push(todo); }; const deleteTodo = (position: number) => { todos.value.splice(position, 1); }; return { todos, addTodo, deleteTodo, }; }; export default useTodos;
σϞ
·ͱΊ • Composition APIܕਪͳͲͷվળΛਤͬͨ ͜Ε·ͰͱҰຯҧ͏ΦτφͷVue.js • ϩδοΫͷ࠶ར༻͕Ͱ͖ɺͳΜͪΌͬͯঢ়ଶཧ Ͱ͖ͪΌ͏!! • ϓϩμΫτʹ͏ͷ(·ͩ)࣌ظঘૣ?
Reference? • Vue-function-api rfc https://vue-composition-api-rfc.netlify.com • API Document https://vue-composition-api-rfc.netlify.com/api.html •
GitHub https://github.com/vuejs/composition-api