將原本的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()
