vue3如何实现
Vue3 实现方式
Vue3 提供了多种方式来实现组件和功能，以下是常见的实现方法：
Composition API
使用 setup 函数和 ref、reactive 等响应式 API 来组织逻辑代码。这种方式更适合复杂组件逻辑的复用和组合。
import { ref, reactive } from 'vue'
export default {
setup() {
const count = ref(0)
const state = reactive({
name: 'Vue3'
})
function increment() {
count.value++
}
return {
count,
state,
increment
}
}
}Options API
与 Vue2 相似的写法，通过 data、methods 等选项来定义组件。适合简单组件或从 Vue2 迁移的项目。
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
}
}Teleport 组件 将子节点渲染到 DOM 树的其他位置，常用于模态框、通知等需要脱离当前 DOM 结构的场景。
<teleport to="body">
<div class="modal">
Modal Content
</div>
</teleport>Suspense 组件 处理异步组件加载时的等待状态，提供更好的用户体验。
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>自定义指令 创建可复用的 DOM 操作指令。
const vFocus = {
mounted(el) {
el.focus()
}
}
export default {
directives: {
focus: vFocus
}
}组合式函数 将可复用的逻辑提取为独立的函数，便于多个组件共享。
// useCounter.js
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
function increment() {
count.value++
}
return {
count,
increment
}
}插件开发 创建可全局使用的插件，扩展 Vue 的功能。
const myPlugin = {
install(app, options) {
app.config.globalProperties.$myMethod = () => {
console.log('Plugin method called')
}
}
}
const app = createApp(App)
app.use(myPlugin)
