Slide 1
Slide 1 text
Function API
You will use in future
v-kansai Vue.js/Nuxt.js meetup #8
@Daikids2
Slide 2
Slide 2 text
খౡ େج / Daiki Kojima
@Daikids2
@daikikojima
ژେֶେֶӃใֶݚڀՊM2
Server/Front, Mobile(iOS/Android)…
Vue fes JPࢀՃ͠·͢!!
࠷ۙFlutterָ͕͍͠…
Slide 3
Slide 3 text
Posted on …
IUUQTTQFBLFSEFDLDPNEBJLJETGVODUJPOBQJZPVXJMMVTFJOGVUVSF
Slide 4
Slide 4 text
Today’s Topic
• Vue 3?
• Function API
Slide 5
Slide 5 text
Vue 3?
Slide 6
Slide 6 text
Vue 3͕ࠓதʹͰΔͬΆ͍
https://vuefes.jp/2019/
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
RFCʹ͓͚Δݱঢ়
௨ͬͨͷ ৹ٞத ٫Լ
(MPCBM"1*
5SFFTIBLJOH
'VODUJPO"1*
7NPEFM"1*
$IBOHF
$VTUPN%JSFDUJWF
"1*$IBOHF
FUDʜ
$MBTT4UZMFBQJ
※ࣈഁյతมߋ
Slide 9
Slide 9 text
ͪͳΈʹ…
Slide 10
Slide 10 text
Global API TreeShaking
• Vue.<͍͍ͨmodule>͡Όͳͯ͘ɺ
named exportΛͬͯapiΛར༻͢Δ͜ͱʹ…
• Named exportͳͷͰ
Webpackʹ͓͍ͯෆཁͳίʔυ(σουίʔυ)
ͷBundleԽΛ͛Δ!!
Slide 11
Slide 11 text
What’s
Function API?
Slide 12
Slide 12 text
Function API?
• Vue 3ʹͯొ(༧ఆ)ͷAPI
• ࠓͪΐ͏ͲRFCͰٞத
• ͜ΕࣗମVue 2Ͱ (ϞδϡʔϧͷಋೖͰ) ར༻Մೳ
• ࠓ·Ͱͱॻ͖ํ͕ҧ͏?
→ݟ͍͖ͯ·͠ΐ͏!!
Slide 13
Slide 13 text
• Πϯετʔϧͪ͜Β
• 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)
Slide 14
Slide 14 text
؆୯ͳαϯϓϧ
Slide 15
Slide 15 text
ެࣜͷαϯϓϧΛݟͯΈΔ
count is {{ count }}
plusOne is {{ plusOne }}
count++
IUUQTHJUIVCDPNWVFKTWVFGVODUJPOBQJ
Slide 16
Slide 16 text
ެࣜͷαϯϓϧΛݟͯΈΔ
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
};
},
};
Slide 17
Slide 17 text
جຊ
• ObjectΛ࡞Δ
• Objectʹؔsetup()Λఆٛͯ͠ɺ
ͦͷதʹॲཧΛॻ͍͍ͯ͘
export default {
setup() {
return {};
},
};
Slide 18
Slide 18 text
Dataͷ࡞
• valueΛ͏!
• Ҿ͕ॳظʹͳͬͯ͘ΕΔΑ!!
// State
const count = value(0);
Slide 19
Slide 19 text
DataͷΞΫηε
• ม໊.valueͰdataͷʹΞΫηεͰ͖Δ!!
count.value++;
Slide 20
Slide 20 text
Computed state
• ࠓ·Ͱcomputedʹॻ͍͍ͯͨͷɺ
computedؔΛ༻͍Δ…
const plusOne = computed(() => count.value + 1);
Slide 21
Slide 21 text
Method
• ΞϩʔؔΛͬͯఆٛ͢Δ͚ͩ!!
// Method
const increment = () => {
count.value++;
};
Slide 22
Slide 22 text
Watch
• ࠓ·ͰͷWatchͱগ͠ॻ͖ํ͕มΘͬͯΔ…
// watch
watch(
// getter
() => count.value * 2,
// callback
val => {
console.log(`cont * 2 is ${val}`);
},
);
ࢹ͢ΔΛؔͰฦ͢
͕มߋ͞ΕͨΒݺͼग़͢
Slide 23
Slide 23 text
ྫ͑…
• ͜ͷΑ͏ͳ߹callback͕ݺΕͳ͍
// watch
watch(
// getter
() => count.value * 0,
// callback
val => {
console.log(`cont * 2 is ${val}`);
},
);
ৗʹ
HFUUFSͷ͕มΘΒݺͼग़͞Εͳ͍
Slide 24
Slide 24 text
ϥΠϑαΠΫϧؔ
• vue-function-apiʹઐ༻ͷ͕ؔ༻ҙ͞Ε͍ͯ·͢…
• onXXXXͱ͔
• ҾʹؔΛೖΕͯΕOK
onMounted(() => {
console.log("mounted");
});
Slide 25
Slide 25 text
࠷ޙʹ
• statemethodͳͲɺએݴͨ͠ͷΛreturnͰฦ͢
return {
count,
plusOne,
increment
};
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Propsͱ͔Ͳͳ͍͢Δͷ?
Slide 28
Slide 28 text
࣮…
• 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 = '';
}
};
Slide 29
Slide 29 text
৮ͬͯΈͯͷॴײ
• ReactͬΆ͍…
• ࣮ࡍʹRFCͰʹͳͬͨΓԌ্?ͯͨ͠
• TSͱ૬ੑ͕ྑͦ͞͏…
Slide 30
Slide 30 text
࠷ޙʹ
• ͜͜ͰҰ෦͔͠հ͓ͯ͠Γ·ͤΜɻ
ΑΓৄ͍͠ใ
https://github.com/vuejs/vue-function-api
ʹࡌͬͯ·͢ɻ
Slide 31
Slide 31 text
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