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
Array Grouping will soon be arriving at TypeScript
jiko21
0
23
Copying Array Methods arrived at TypeScript
jiko21
1
350
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
81
node:test will replace Jest?
jiko21
0
49
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
240
NestJS a progressive web framework
jiko21
3
1.8k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.4k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
950
VueでPWAするときに 気をつけておきたいTips
jiko21
2
480
Other Decks in Technology
See All in Technology
皆がすなるカオスエンジアリングといふものを、ネットワークオペレーションでもしてみむとてするなり
tjmtrhs
0
120
最速思考でバクラク品質を! スタートアップのリアルな課題とQAの実践
nakanao
1
440
Feature Flag Deep Dive
biwashi
20
5k
令和最新版 ソフトウェアエンジニアのためのDJ入門、あるいはDJに学ぶ仕事術 #ya8
stefafafan
1
130
実録_マルチテナント環境でのGmailガイドライン対応
ryuichi1208
7
1.5k
OCI Data Science Service 製品概要
oracle4engineer
PRO
0
110
書を捨てよ、現場へ出よう
nwiizo
11
8.7k
We Fear Change, for DevOpsDays LA 2024
cote
PRO
0
130
Automate your changelogs! Release Drafter
onenashev
PRO
2
410
ChatGPTのLT会-メモソフトにChatGPT入れると結構便利
okada_fuutass
0
150
Server-Side Kotlin + Spring Boot + Exposedでやったこと
ikefukurou777
0
110
スケジュール指定のFargate Spotと友達になれた話
news_it_enj
0
240
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
317
37k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
A Philosophy of Restraint
colly
195
15k
jQuery: Nuts, Bolts and Bling
dougneiner
57
7.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
4
1.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
In The Pink: A Labor of Love
frogandcode
137
21k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
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