thisが今まで通りに使えない！

v2だとこんな↓コードで、現在のページのパスが返ります。

export default defineNuxtComponent({
  computed: {
    computedTest() {
      return this.$route.path
    },
  },
})

ところがv3では少なくとも$routeは無理っぽい。

じゃーどうすればいいかというと、こんな↓風にuseRouteを使うみたいです。

export default defineNuxtComponent({
  computed: {
    computedTest() {
      const route = useRoute()
      
      return route.path
    },
  },
})

こうやるとrouteの中にv2のthis.$routeの中身が入ります。

そのページ内で何度も使い回す場合は、こんな↓風にcomputedにしてしまうとv2とかなり近い感じで使えます。

export default defineNuxtComponent({
  computed: {
    computedTest() {
      return this.route.path
    },
    route() {
      return useRoute()
    },
  },
})

v3の「v2のアレはどうやってアクセスするのか分からない！」ってのはこういうuseナントカ系(composablesと呼ぶらしい)でけっこういけるので、この書き方を覚えてればどうにかなりそう。 公式のこのページの左メニューの「Composables」というところに一覧があります。

これ以外の自分で作ったdataとかcomputedは従来と同じようにthisでアクセスできるようでした。

注意点として、export defaultの外側でこの関数を呼ぶとエラーが出ます。 呼び出し側に「this」がいるかどうかとかじゃなくてコールした段階でエラーが出てます。

const route = useRoute()

export default defineNuxtComponent({
  computed: {
    computedTest() {
      return this.route.path
    },
  },
})

おそらくscriptではexport defaultの外側はインスタンスができる前に呼ばれていて、script setupではインスタンスができた後に呼ばれているせいじゃないかと思います。

dataはそのまま使えそう

コンポーネント内で使い回す変数を定義するdataの部分はv2と同じ書き方↓でいけました。

export default defineNuxtComponent({
  data() {
    return {
      key: value,
    }
  },
})

さらにおまけに、script setupの書き方だとリアクティビティとかいうのを考えないといけないっぽくて、templateから変数の変化を検知するような仕組み(アコーディオンの開閉とか)の場合、この↓ようにrefを使って初期化しないといけません。

const flag = ref(true)

script内では「flag.value」に値が入っていたり、templateでは「flag」のままいけたりとなんか気持ち悪かったんですが、defineNuxtComponentのdataだとv2と同じように「flag」でscriptからもtemplateからもアクセスできます。

computedやmethodsも同じ

computedは計算付き変数？、methodsは関数を定義する部分です。 書き方においてはv2と全く同じだと思います。

export default defineNuxtComponent({
  computed: {
    computedTest() {
      return 'computed-test'
    },
  },
  methods: {
    methodsTest(v) {
      return 'methods-test'
    },
  },
})

mountedは従来通りいけそう？

僕の認識ではmountedはインスタンス完成後、ページ表示前に実行される処理と認識していて、コンストラクタみたいなもん？ インスタンスが出来上がっているのでコンポーネントに必要な値は全て揃っているのでその最終調整とかに使っていました。

export default defineNuxtComponent({
  mounted() {
    console.log('mounted-test')
  },
})

とりあえず書き方はv2と同じようで、上の書き方でちゃんと出力されました。

実際の挙動として変化があるのかないのかはまだ分からないので、移植するプロジェクトに使われていたらテストします。 とりあえずuse系、computed、methodsなんかにはアクセスできました。

propsもそのまま使える

propsというのは独自コンポーネントを作る際に、親要素から引数を受け取る方法です。

<MyComponet id="1" />

受け取り側(独自コンポーネント内)はこの↓ようにv2と同じ書き方でv3でも機能しました。

export default defineNuxtComponent({
  props: [
    'id',
  ],
})

これでscript内では「this.id」、template内では「id」で親要素からの引数にアクセスできます。

headはけっこう制限あり

defineNuxtComponentにheadを追加すると、v2と同様にheadタグ内の追記？上書き？ができます。

export default defineNuxtComponent({
  head(nuxtApp) {
    return {
      title: 'これはタイトルだよ',
    }
  },
})

実行順の問題で、アクセスできる要素にけっこうな制限があります。 詳細は後述します。

<script>

let num = 0

export default {
  head() {
    num++
    console.log('head: ' + num)
  },
  asyncData () {
    num++
    console.log('asyncData: ' + num)
  },
  data() {
    num++
    console.log('data: ' + num)
  },
  mounted() {
    num++
    console.log('mounted: ' + num)
  },
}

</script>

<script lang="ts">

const func = (value) => {
  return value+1
}

export default defineNuxtComponent({
  asyncData () {
    console.log(func(1))
  },
  methods: {
    plus(value) {
      return func(value)
    },
  },
})

</script>

export default defineNuxtComponent({
  mounted() {
    useHead({
      title: 'タイトルだよー',
    })
  },
})

最後にメモ

いやー、defineNuxtComponentがなかったらv3を諦めてたかもしれないくらいに、今の僕には神機能でした。

asyncDataをゴリゴリ使ってるプロジェクトを移植したらasyncDataについては追記しておきます。 まだシンプルなプロジェクトしか移植できてないので、他の要素も追記がだいぶ増えそうな予感。