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
94
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
72
どこでも動かすために… 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
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
180
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.6k
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
650
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
360
AIエージェント入門
minorun365
PRO
31
18k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.1k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.7k
ウォンテッドリーのデータパイプラインを支える ETL のための analytics, rds-exporter / analytics, rds-exporter for ETL to support Wantedly's data pipeline
unblee
0
130
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1.2k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
620
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Adopting Sorbet at Scale
ufuk
74
9.2k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
How STYLIGHT went responsive
nonsquared
98
5.4k
Gamification - CAS2011
davidbonilla
80
5.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
A better future with KSS
kneath
238
17k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Bash Introduction
62gerente
611
210k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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