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)

生命周期

註意：因為 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