Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Function API You will use in future
jiko21
July 24, 2019
Programming
2
1.5k
Function API You will use in future
V-kansai#8の登壇資料です。
jiko21
July 24, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
NestJS a progressive web framework
jiko21
3
1.3k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.2k
Deep Dive Into Vue Composition API
jiko21
0
3.1k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
490
VueでPWAするときに 気をつけておきたいTips
jiko21
2
420
知ってました?Firebase Cloud FunctionsでTypeScriptが使えるよ!
jiko21
2
670
TypeScriptでVueを書いてみよう!
jiko21
1
430
TypeScriptとVue
jiko21
4
1.7k
May Python Prevail Everyone
jiko21
0
790
Other Decks in Programming
See All in Programming
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
CSE360 Tutorial 07
javiergs
PRO
0
100
Improving Developer Experience Through Tools and Techniques 2022
krzysztofzablocki
0
540
インターン生・新卒向け、学校でもっと教えてほしいITエンジニア基本スキル
nearme_tech
0
130
Springin‘でみんなもクリエイターに!
ueponx
0
220
Managing Error Messages with your Oracle Database REST APIs
thatjeffsmith
0
140
Angular‘s Future without NgModules: Architectures with Standalone Components @enterJS
manfredsteyer
PRO
0
230
io22 extended What's new in app performance
veronikapj
0
340
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
120
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
540
Android Compose Component - mapping.
taehwandev
0
140
クックパッドマートの失敗したデータ設計 Before / After 大放出
mokuzon
0
150
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
15
36k
Three Pipe Problems
jasonvnalue
89
8.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Pencils Down: Stop Designing & Start Developing
hursman
112
9.8k
Gamification - CAS2011
davidbonilla
75
3.9k
The Cult of Friendly URLs
andyhume
68
4.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
151
13k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Bash Introduction
62gerente
597
210k
Teambox: Starting and Learning
jrom
123
7.7k
Transcript
Function API You will use in future v-kansai Vue.js/Nuxt.js meetup
#8 @Daikids2
খౡ େج / Daiki Kojima @Daikids2 @daikikojima ژେֶେֶӃใֶݚڀՊM2 Server/Front, Mobile(iOS/Android)…
Vue fes JPࢀՃ͠·͢!! ࠷ۙFlutterָ͕͍͠…
Posted on … IUUQTTQFBLFSEFDLDPNEBJLJETGVODUJPOBQJZPVXJMMVTFJOGVUVSF
Today’s Topic • Vue 3? • Function API
Vue 3?
Vue 3͕ࠓதʹͰΔͬΆ͍ https://vuefes.jp/2019/
None
RFCʹ͓͚Δݱঢ় ௨ͬͨͷ ৹ٞத ٫Լ (MPCBM"1* 5SFFTIBLJOH 'VODUJPO"1* 7NPEFM"1* $IBOHF
$VTUPN%JSFDUJWF "1*$IBOHF FUDʜ $MBTT4UZMFBQJ ※ࣈഁյతมߋ
ͪͳΈʹ…
Global API TreeShaking • Vue.<͍͍ͨmodule>͡Όͳͯ͘ɺ named exportΛͬͯapiΛར༻͢Δ͜ͱʹ… • Named exportͳͷͰ
Webpackʹ͓͍ͯෆཁͳίʔυ(σουίʔυ) ͷBundleԽΛ͛Δ!!
What’s Function API?
Function API? • Vue 3ʹͯొ(༧ఆ)ͷAPI • ࠓͪΐ͏ͲRFCͰٞத • ͜ΕࣗମVue 2Ͱ
(ϞδϡʔϧͷಋೖͰ) ར༻Մೳ • ࠓ·Ͱͱॻ͖ํ͕ҧ͏? →ݟ͍͖ͯ·͠ΐ͏!!
• Πϯετʔϧͪ͜Β • main.jsʹͯ ͜ͷΑ͏ʹ install ಋೖ $ npm install
vue-function-api --save import Vue from "vue"; import App from "./App.vue"; import store from "./store"; import "./registerServiceWorker"; import { plugin } from 'vue-function-api' Vue.use(plugin)
؆୯ͳαϯϓϧ
ެࣜͷαϯϓϧΛݟͯΈΔ <template> <div class="count"> <span>count is {{ count }}</span> <span>plusOne
is {{ plusOne }}</span> <button @click="increment">count++</button> </div> </template> IUUQTHJUIVCDPNWVFKTWVFGVODUJPOBQJ
ެࣜͷαϯϓϧΛݟͯΈΔ <script> import { value, computed, watch, onMounted } from
'vue-function-api'; export default { setup() { // State const count = value(0); // computed state const plusOne = computed(() => count.value + 1); // Method const increment = () => { count.value++; }; // watch watch( () => count.value * 2, val => { console.log(`cont * 2 is ${val}`); }, ); onMounted(() => { console.log("mounted"); }); return { count, plusOne, increment }; }, }; </script>
جຊ • ObjectΛ࡞Δ • Objectʹؔsetup()Λఆٛͯ͠ɺ ͦͷதʹॲཧΛॻ͍͍ͯ͘ export default { setup()
{ return {}; }, };
Dataͷ࡞ • valueΛ͏! • Ҿ͕ॳظʹͳͬͯ͘ΕΔΑ!! // State const count =
value(0);
DataͷΞΫηε • ม໊.valueͰdataͷʹΞΫηεͰ͖Δ!! count.value++;
Computed state • ࠓ·Ͱcomputedʹॻ͍͍ͯͨͷɺ computedؔΛ༻͍Δ… const plusOne = computed(() =>
count.value + 1);
Method • ΞϩʔؔΛͬͯఆٛ͢Δ͚ͩ!! // Method const increment = () =>
{ count.value++; };
Watch • ࠓ·ͰͷWatchͱগ͠ॻ͖ํ͕มΘͬͯΔ… // watch watch( // getter () =>
count.value * 2, // callback val => { console.log(`cont * 2 is ${val}`); }, ); ࢹ͢ΔΛؔͰฦ͢ ͕มߋ͞ΕͨΒݺͼग़͢
ྫ͑… • ͜ͷΑ͏ͳ߹callback͕ݺΕͳ͍ // watch watch( // getter () =>
count.value * 0, // callback val => { console.log(`cont * 2 is ${val}`); }, ); ৗʹ HFUUFSͷ͕มΘΒݺͼग़͞Εͳ͍
ϥΠϑαΠΫϧؔ • vue-function-apiʹઐ༻ͷ͕ؔ༻ҙ͞Ε͍ͯ·͢… • onXXXXͱ͔ • ҾʹؔΛೖΕͯΕOK onMounted(() => {
console.log("mounted"); });
࠷ޙʹ • statemethodͳͲɺએݴͨ͠ͷΛreturnͰฦ͢ return { count, plusOne, increment };
None
Propsͱ͔Ͳͳ͍͢Δͷ?
࣮… • setupʹҾͱͯ͠propsΛه͢ΕOK • https://github.com/daikikojima/vue-function-api- memo ʹͯpropsΛͬͨ ϝϞΞϓϦΛஔ͍ͯ·͢ɻ export default
{ props: ['addTodo'], setup(props) { const text = value(''); const onAddClick = () => { if (text.value !== '') { props.addTodo(text.value); text.value = ''; } };
৮ͬͯΈͯͷॴײ • ReactͬΆ͍… • ࣮ࡍʹRFCͰʹͳͬͨΓԌ্?ͯͨ͠ • TSͱ૬ੑ͕ྑͦ͞͏…
࠷ޙʹ • ͜͜ͰҰ෦͔͠հ͓ͯ͠Γ·ͤΜɻ ΑΓৄ͍͠ใ https://github.com/vuejs/vue-function-api ʹࡌͬͯ·͢ɻ
Reference? • Vue-function-api https://github.com/vuejs/vue-function-api • Vue rfc (function apiͷproposal) https://github.com/vuejs/rfcs/pull/42
• αϯϓϧͷίʔυ https://github.com/daikikojima/vue-function-api-memo