最近チームで VueDemi を使った Vue 2/3 共通ライブラリの開発を実戦投入し、いくつかの経験を積みました。似たような取り組みをする人の参考になればと、ここにまとめます。

コアコンセプト

基本的な実装方法から見てみましょう：

import { ref, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)

    watch(count, (newVal, oldVal) => {
      console.log(`count: ${oldVal} -> ${newVal}`)
    })

    onMounted(() => { console.log('组件已挂载') })

    return { count, doubled }
  }
}

このコードは基本的な使用方法を示しています。実際のプロジェクトでは、エラー処理とエッジケースも考慮する必要があります。

詳細分析

この基盤の上で、さらに最適化できます：

import { reactive, toRefs, computed } from 'vue'

function useCounter(initial = 0) {
  const state = reactive({ count: initial, history: [initial] })
  const doubled = computed(() => state.count * 2)

  function increment() {
    state.count++
    state.history.push(state.count)
  }

  return { ...toRefs(state), doubled, increment }
}

このパターンは大規模プロジェクトで非常に実用的で、メンテナンスコストを大幅に削減できます。

実装経験

実際のプロジェクトでの使い方はより複雑になります：

import { ref, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)

    watch(count, (newVal, oldVal) => {
      console.log(`count: ${oldVal} -> ${newVal}`)
    })

    onMounted(() => { console.log('组件已挂载') })

    return { count, doubled }
  }
}

このアプローチにより、コードのテスト可能性とスケーラビリティの両方が向上します。

最適化戦略

以下は全体のサンプルです：

import { reactive, toRefs, computed } from 'vue'

function useCounter(initial = 0) {
  const state = reactive({ count: initial, history: [initial] })
  const doubled = computed(() => state.count * 2)

  function increment() {
    state.count++
    state.history.push(state.count)
  }

  return { ...toRefs(state), doubled, increment }
}

境界条件の処理に注意してください。これは本番環境において非常に重要です。

まとめ

• コード例は参考のみであり、ビジネスケースに応じて調整が必要です
• VueDemi を用いた Vue 2/3 共通ライブラリ開発は銀の弾丸ではなく、プロジェクトの規模と技術スタックに応じて選ぶ必要があります
• APIを暗記するよりも、基盤となる原理を理解する方が重要です