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 函数中编写。
onMounted(() => {
console.log('Component is mounted!')
})
// ...
计算属性、侦听器
// 定义一个计算属性，计算年龄是否为18
const ageIs18 = computed(() => {
return age.value === 18
})
// 定义一个watch侦听器，监控count变化
watch(count, (nV, oV) => {
console.log(nV, oV)
})
路由
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
import { createApp } from 'vue'
import router from './router'
...
const app = createApp(App)
app.use(router) // 挂载路由到Vue
import { useRouter } from 'vue-router'
// useRouter()用于获取路由对象
const router = useRouter()
router.push({ path: '/next' })
// useRoute()用于获取当前路由对象
const route = useRoute()
const query = route.query
pinia
Vuex替代品，全局数据管理器
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 }
})
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)
Original: https://www.cnblogs.com/zh1q1/p/16399735.html
Author: 吴知木
Title: Vue 3.x基础
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/599353/
转载文章受原作者版权保护。转载请注明原作者出处！