vue2升級vue3 composition api紀錄

將原本的vue2更新使用vue3 composition api改寫

針對原本vue2 option api使用的各個功能對應到vue3的使用

紀錄如下

1.主架構

<script setup lang="ts"></script>

所有要用的功能都由vue import

import {ref,reactive,computed,watch...} from 'vue'

只有在使用setup()才需要return

如果是以script setup則不需要return

在程式內沒有任何的this使用

2.props

設定

以 defineProps({})定義建立

ex:

  const props = defineProps({

    host: {

      type: String,

      default: ''

    }

  })

使用

ex:

  props.host

3.data3.data

以ref或reactive包裝變數

ref:一般的變數都以ref包裝，使用必須以.value讀取

ex:

  建立 const myvar = ref('') 

  使用 myvar.value

reactive: Object或Array以reactive包裝

ex:

  建立 const myvar = reactive({x,y})

  使用 myvar.x

4.computed或取自store的getters

以computed包裝 使用上以.value取值

設定建立

  const inAgent = computed(() => {

    return currentHost.value.inAgent !== undefined && currentHost.value.inAgent

  })

使用

  inAgent.value

5.attrs

  取得網頁上html上設定的attrs

  取得

  import { useAttrs} from 'vue'

  const attrs = useAttrs()

  使用 attrs.xxx 不需要value

6.生命週期

created 就直接寫在setup內其他都有對應的

ex:mounted即改為執行

  onMounted(() => {

  })

7.watch

以watch包裝

  ex:

  watch(props.host, (val, oldVal) => {

    if (val !== oldVal) console.log(`watch!! host=${val}`)

  })

8.methods

不在method內使用this

9.vuex

  使用useStore取得store操作

  import { useStore } from 'vuex'

  const store = useStore()

10.vue-router

  import { useRoute, useRouter } from 'vue-router'

  const route = useRoute()

  const router = useRouter()