vue3实现
以下是 Vue 3 实现常见功能的几种方法，涵盖基础到进阶场景：
组件基础实现
使用 setup 语法糖组合式 API：
<template>
<button @click="increment">{{ count }}</button>
</template>
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++
</script>状态管理
Pinia 替代 Vuex 的推荐方案：
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
actions: {
increment() {
this.count++
}
}
})路由控制
Vue Router 4.x 基本配置：
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})响应式数据处理
深度响应式转换：
import { reactive } from 'vue'
const state = reactive({
user: {
name: 'John',
contacts: [
{ type: 'email', value: 'john@example.com' }
]
}
})生命周期钩子
组合式 API 生命周期示例：
import { onMounted, onUnmounted } from 'vue'
onMounted(() => {
console.log('组件挂载完成')
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})组件通信
父子组件通信：
<!-- 父组件 -->
<Child :msg="parentMsg" @update="handleUpdate"/>
<!-- 子组件 -->
<script setup>
defineProps(['msg'])
defineEmits(['update'])
</script>动态组件加载
<component :is="currentComponent"/>
<script setup>
import { shallowRef } from 'vue'
const currentComponent = shallowRef(ComponentA)
</script>自定义指令
全局指令注册：
const app = createApp(App)
app.directive('focus', {
mounted(el) {
el.focus()
}
})组合式函数复用
抽离可复用逻辑：
// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'
export function useMouse() {
const x = ref(0)
const y = ref(0)
const update = (e) => {
x.value = e.pageX
y.value = e.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
return { x, y }
}Teleport 传送门
将内容渲染到 DOM 其他位置：
<teleport to="body">
<div class="modal">传送的内容</div>
</teleport>以上示例展示了 Vue 3 的核心功能实现方式，根据具体需求可进行组合和扩展。
