Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Composition API TypeScriptはVue.jsの夢を見るか?

jiko21
September 06, 2019

Composition API TypeScriptはVue.jsの夢を見るか?

KansaiTS#2の資料です!

jiko21

September 06, 2019
Tweet

More Decks by jiko21

Other Decks in Technology

Transcript

  1. Vue.extend import Vue from 'vue'; export default Vue.extend({ name: 'CountExtemd',

    props: { msg: { Type: String, required: true, }, }, data() { return { count: 0, }; }, methods: { add() { this.count += 1; }, minus() { this.count -= 1; }, }, });
  2. Vue.extend • ͍ͭ΋ͷVueͱ΄΅ಉ͡! • propsपΓͷܕ͕
 গ͠ؾ࣋ͪѱ͍… import Vue from 'vue';

    export default Vue.extend({ name: 'CountExtemd', props: { msg: { Type: String, required: true, }, }, data() { return { count: 0, }; }, methods: { add() { this.count += 1; }, minus() { this.count -= 1; }, }, });
  3. Class Style (vue-property-decorator) import { Component, Prop, Vue } from

    'vue-property-decorator'; @Component class CountClass extends Vue { @Prop() private msg!: string; count = 0; add() { this.count += 1; } minus() { this.count -= 1; } }
  4. Class Style (vue-property-decorator) import { Component, Prop, Vue } from

    'vue-property-decorator'; @Component class CountClass extends Vue { @Prop() private msg!: string; count = 0; add() { this.count += 1; } minus() { this.count -= 1; } } • Vue + TSͷਓ͕
 Α͘࢖ͬͯΔ΍ͭ • एׯσίϨʔλ͕ܳ
 ա͗Δؾ͕͢Δ…
  5. Composition API!! import {createComponent, reactive} from '@vue/composition-api'; const Count =

    createComponent({ props: ['msg'], setup() { const state = reactive({ count: 0, }); const add = () => { state.count += 1; }; const minus = () => { state.count -= 1; }; return { state, add, minus, }; }, });
  6. ॻ͖ํ • data͸ref΍state, methods͸ؔ਺ͱͯ͠
 ॻ͍ͯ͋͛Ε͹OK • reactive͸Vue.observable()ͱ
 ಉ౳(Rxͱͬͪ͝ΌʹͳΔ͔Β
 վ໊ͨ͠Β͍͠…) setup()

    { const state = reactive({ count: 0, }); const add = () => { state.count += 1; }; const minus = () => { state.count -= 1; }; return { state, add, minus, }; },
  7. ·ͱΊ • Vue.jsΛTypeScriptͰॻ͘ʹ͸3ύλʔϯ • Vue.extend • Class • Composition •

    Composition APIͳΒܕਪ࿦ͳͲ͕Α͘ͳΔ͔΋… • ͨͩ͠ɺfunction-apiͷ࣌ͱൺ΂ͯ݁ߏมߋ͋ΔͷͰ
 ༷ࢠݟ͕ྑͦ͞͏…