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
92
Array Grouping will soon be arriving at TypeScript
jiko21
0
92
Copying Array Methods arrived at TypeScript
jiko21
1
570
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
110
node:test will replace Jest?
jiko21
0
71
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
330
NestJS a progressive web framework
jiko21
3
2.1k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
1.5k
Other Decks in Technology
See All in Technology
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
140
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
130
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
2.2k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
540
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
140
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.5k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
260
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
120
コンテナサプライチェーンセキュリティ
kyohmizu
1
130
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.3k
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
540
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Designing for humans not robots
tammielis
250
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
How GitHub (no longer) Works
holman
314
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Building an army of robots
kneath
303
45k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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