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
66
Array Grouping will soon be arriving at TypeScript
jiko21
0
63
Copying Array Methods arrived at TypeScript
jiko21
1
510
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
100
node:test will replace Jest?
jiko21
0
66
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
280
NestJS a progressive web framework
jiko21
3
2k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
1.1k
Other Decks in Technology
See All in Technology
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
280
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
260
Interfacing Kernel C APIs from Rust
ennael
PRO
0
210
OPENLOGI Company Profile for engineer
hr01
1
12k
VS CodeでF1〜12キーつかってますか? / Do you use the F1-12 keys in VS Code?
74th
2
270
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
13k
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
1
200
AWS Lambdaで実現するスケーラブルで低コストなWebサービス構築/YAPC::Hakodate2024
fujiwara3
5
910
Causal Impactを用いたLINE Pay UIの効果検証とABテスト実施への貢献
lycorptech_jp
PRO
3
490
Understanding and Optimising INP
akshayysharma
0
150
AWSへのNIST SP800-171管理策 導入に向けての整備/20240930 Mitsutoshi Matsuo
shift_evolve
0
150
ガバメントクラウド開発と変化と成長する組織 / Organizational change and growth in developing a government cloud
kazeburo
2
480
Featured
See All Featured
Designing for Performance
lara
604
68k
Code Reviewing Like a Champion
maltzj
519
39k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
105
48k
What's in a price? How to price your products and services
michaelherold
243
11k
Rails Girls Zürich Keynote
gr2m
93
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
4
99
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Producing Creativity
orderedlist
PRO
341
39k
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