Vue Composion API

이 자료에 관하여

이 자료는 Vue2입니다.0 모바일의 제품 중에서는 Vue Composition API에 대한 간단한 설명으로 주목받기 위해 활용됐다.
대상 독자는 다음과 같은 내용을 구상했다.

Vue의 Option API 터치

React Hooks 경험 없음

더 자세한 지식은 공식 문서를 참조하세요.

Vue 3 계열의 교환 위치에 대한api

무엇

이전과 다른 격식으로 vue를 쓰는 기법

향후 메인스트림

react에 강한 영향을 미치는 hooksapi
https://ja.reactjs.org/docs/hooks-reference.html

뭐가 그리 좋으냐

기능 단위로 포장 가능

vue의 독특한 형식 감소(data 속성 또는 은식this 등)

지금까지의 작법

※ 옵티온 API라고 합니다

<template>
  <div>
    <h1>Counter App</h1>
    <div>{{ count }}</div>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

새로운 서법

Vue3.0comosition api

<template>
  <div>
    <h1>Counter App</h1>
    <div>{{ state.count }}</div>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    const increment = () => {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
<script>

들여다보다

step1

export default {
  setup() {
    // setupメソッドの中に処理をまとめて書く
  }
}

step2

import { reactive } from 'vue'

export default {
  setup() {
    // オブジェクトをreactiveメソッドに通す
    const state = reactive({ count: 0 })
  }
}

step3

export default {
  setup() {
    const state = reactive({ count: 0 })
    
    // 状態の更新関数をつくる
    const increment = () => {
      state.count++
    }
  }
}

step4

export default {
  setup() {
    const state = reactive({ count: 0 })

    const increment = () => {
      state.count++
    }
    
    // vue templateで使うものをreturnする
    return {
      state,
      increment
    }
  }
}

이렇게 하면 어떤 변화가 있습니까?

setup에서'단순한 함수'로 분리할 수 있습니다

import { reactive } from 'vue'

function useCounter () {
  const state = reactive({ count: 0 })

  const increment = () => {
    state.count++
  }

  return {
    state,
    increment
  }
}

export default {
  setup() {
    const { state, incremet } = useCounter()

    return {
      state, 
      incremet
    }
  }
}

물고 있다

임의의 처리를 다른 함수로 분리할 수 있다

decreament를 다른 함수로 분리해 보십시오

<template>
  <div>
    <h1>Counter App</h1>
    <div>{{ count1.count }}</div>
    <button @click="increment">increment</button>

    <div>{{ count2.count }}</div>
    <button @click="decrement">decrement</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

function useCounter () {
  const count1 = reactive({ count: 0 })

  const increment = () => {
    count1.count++
  }

  return {
    count1,
    increment
  }
}

function useCounter2 () {
  const count2 = reactive({ count: 0 })

  const decrement = () => {
    count2.count--
  }

  return {
    count2,
    decrement
  }
}

export default {
  setup() {
    return {
      ...useCounter(),
      ...useCounter2()
    }
  }
}
<script>

class 구조로 봉인
뭔가 닮은 것 같아.

이걸 할 수 있다면.

기능 단위로 독립된 모듈을 제작할 수 있다
useCounter.js라는 파일
useCounter.js

import { reactive } from 'vue'

export function useCounter () {
  const count1 = reactive({ count: 0 })

  const increment = () => {
    count1.count++
  }

  return {
    count1,
    increment
  }
}

useCounter2.js라는 파일
useCounter2.js

import { reactive } from 'vue'

export function useCounter2 () {
  const count2 = reactive({ count: 0 })

  const decrement = () => {
    count2.count--
  }

  return {
    count2,
    decrement
  }
}

Counter.vue에서 입력하기만 하면 계수기 기능을 사용할 수 있습니다

<template>
  <div>
    <h1>Counter App</h1>
    <div>{{ count1.count }}</div>
    <button @click="increment">increment</button>

    <div>{{ count2.count }}</div>
    <button @click="decrement">decrement</button>
  </div>
</template>

<script>
import { useCounter } from '@/hooks/useCounter'
import { useCounter2 } from '@/hooks/useCounter2'

export default {
  setup() {
    const { count1, increment } = useCounter()
    const { count2, decrement } = useCounter2()

    return {
      count1,
      increment,
      count2,
      decrement
    }
  }
}
<script>

Q.

다른 구성 요소에useCounter2 기능만 추가하고 싶을 때
어떡하죠?

useCounter2.js 내용 복사

useCounter2.js 가져오기

A.

useCounter2.js 가져오기

여러 가지 화면이 통용되는 기능을 제시하면...
가져오기만 하면 화면을 쉽게 만들 수 있습니다.

꿈, 만연!

@vue/composion-api 패키지를 가져오면
Vue 2 시스템 항목에서도 사용 가능
https://www.npmjs.com/package/@vue/composition-api
또한 생략되었지만 typescript와 코디가 좋아질 수 있습니다
참고 자료
https://v3.vuejs.org/guide/composition-api-introduction.html

끝맺다

구두해설을 전제로 한 자료인 만큼 문서만으로는 이해하기 어려운 측면도 있다.
좋은 의견이 있으면 꼭 지적해 주십시오.