Vue 3.x基礎 模版 <template> // html </template> <script setup> // setup API // ... </script> <style> // css </style> setup API 變數（響應式） // 基本數據類型 let refVa ...
Vue 3.x基礎
模版
<template>
// html
</template>
<script setup>
// setup API
// ...
</script>
<style>
// css
</style>
setup API
變數（響應式）
// 基本數據類型
let refValue = ref(1)
console.log(refValue.value) // 1
// 複雜數據類型
let reactiveValue = reactive({ a: 1, b: 2 })
console.log(reactiveValue) // { a: 1, b: 2 }
// 解構toRefs，一般用於reacative創建的變數
const { a, b } = toRefs(reactiveValue)
console.log(a, b) // 1, 2
函數
// 創建
const changeValue = (v) => {
refValue.value = v
console.log(v) // 1
}
// 調用
changeValue(1)
生命周期
| 選項式 API | Setup API | 調用時機 |
|---|---|---|
| beforeCreate | Not needed* | # |
| created | Not needed* | # |
| beforeMount | onBeforeMount（常用） | 在掛載開始之前被調用：相關的 render 函數首次被調用。 |
| mounted | onMounte（常用） | 組件掛載時調用 |
| beforeUpdate | onBeforeUpdate | 數據更新之前調用，此時DOM還未更新 |
| updated | onUpdated | DOM 重新渲染和打補丁，此時DOM已更新，不要在該鉤子函數里更新數據。 |
| beforeUnmount | onBeforeUnmount | 在卸載組件實例之前調用。此時Vue實例仍是正常的。 |
| unmounted | onUnmounted | 卸載組件實例後調用，組件實例的所有指令、事件偵聽器都被移、子組件實例都會被卸載。 |
| activated | onActivated | 被 keep-alive 緩存的組件激活時調用。 |
| deactivated | onDeactivated | 被 keep-alive 緩存的組件停用時調用。 |
| errorCaptured | onErrorCaptured | 當捕獲一個來自子孫組件的錯誤時被調用，此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。 |
| renderTracked | onRenderTracked | # |
| renderTriggered | onRenderTriggered | # |
註意：因為 setup 是++圍繞 beforeCreate 和 created++ 生命周期鉤子運行的，所以不需要顯式地定義它們。換句話說，在這些鉤子中編寫的任何代碼都應該直接在 setup 函數中編寫。
<script setup>
onMounted(() => {
console.log('Component is mounted!')
})
// ...
</script>
計算屬性、偵聽器
<script setup>
// 定義一個計算屬性，計算年齡是否為18
const ageIs18 = computed(() => {
return age.value === 18
})
// 定義一個watch偵聽器，監控count變化
watch(count, (nV, oV) => {
console.log(nV, oV)
})
</script>
路由
<!-- router.js -->
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
path: '/',
redirect: '/home'
// component: () => import('../pages/home.vue') // 組件懶載入
}
...
]
// 創建路由實例
const router = createRouter({
history: createWebHashHistory(), // 使用 hash 模式
routes, // `routes: routes` 的縮寫
})
export default router
<!-- main.js -->
import { createApp } from 'vue'
import router from './router'
...
const app = createApp(App)
app.use(router) // 掛載路由到Vue
<!-- pages/home.vue -->
<script setup>
import { useRouter } from 'vue-router'
// useRouter()用於獲取路由對象
const router = useRouter()
router.push({ path: '/next' })
// useRoute()用於獲取當前路由對象
const route = useRoute()
const query = route.query
</script>
pinia
Vuex替代品，全局數據管理器
<!-- pinia/user.js -->
import { defineStore } from 'pinia'
import { ref, computed, reactive } from 'vue';
// useStore 可以是 useUser、useCart 之類的任何東西
// 第一個參數是應用程式中 store 的唯一 id
export const usePiniaStore = defineStore('user', () => {
// vue3 setup編程模式，讓結構更加扁平化
const _this = window.$this
// state
const userId = ref('111122')
const userData = ref(null)
// action
const getUser = async () => {
const res = await _this.$api.getId()
userData.value = res.data
}
// getter
const userName = computed(() => userData.value.id + ' ---- ')
// 導出
return { userData, userName, getUser, userId }
})
<!-- pages/user.vue -->
<script setup>
import { usePiniaStore } from '../pinia/user.js'
// 使用pinia user module
const useStore = usePiniaStore()
// 解構state
const { userData, userName, userId } = storeToRefs(useStore)
// 直接調用pinia函數
useStore.getUser()
// 直接賦值
userId.value = 'aaa'
console.log(`userStore:`, userId.value, userData.value)
</script>
本文來自博客園，作者：吳知木，轉載請註明原文鏈接：https://www.cnblogs.com/zh1q1/p/16399735.html
