vue业务实现
Vue 业务实现的关键方法
组件化开发
Vue 的核心思想是组件化，将 UI 拆分为独立可复用的组件。每个组件包含模板、逻辑和样式，通过 props 传递数据，通过事件实现父子通信。业务逻辑应尽量封装在组件内部，避免全局状态污染。
<template>
<div class="user-card">
<h3>{{ user.name }}</h3>
<button @click="handleFollow">关注</button>
</div>
</template>
<script>
export default {
props: ['user'],
methods: {
handleFollow() {
this.$emit('follow', this.user.id)
}
}
}
</script>状态管理
复杂业务需使用 Vuex 或 Pinia 管理全局状态。Vuex 的 store 包含 state、mutations、actions 和 getters，适合中大型项目。Pinia 更轻量且支持 TypeScript。
// Pinia 示例
import { defineStore } from 'pinia'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
addItem(product) {
this.items.push(product)
}
}
})API 交互
使用 axios 或 fetch 与后端 API 交互。建议封装请求模块，统一处理错误和 loading 状态。结合 async/await 使异步代码更清晰。
import axios from 'axios'
export const getUser = async (userId) => {
try {
const res = await axios.get(`/api/users/${userId}`)
return res.data
} catch (error) {
console.error('获取用户失败', error)
throw error
}
}路由管理
Vue Router 实现页面导航和权限控制。动态路由和导航守卫可处理权限验证，懒加载优化性能。
const routes = [
{
path: '/admin',
component: () => import('./Admin.vue'),
meta: { requiresAuth: true }
}
]
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
next('/login')
} else {
next()
}
})表单处理
复杂表单建议使用 v-model 双向绑定，结合计算属性和 watcher 处理联动逻辑。验证可使用 VeeValidate 或自定义规则。
<template>
<form @submit.prevent="submit">
<input v-model="form.email" type="email">
<span v-if="errors.email">{{ errors.email }}</span>
</form>
</template>
<script>
export default {
data() {
return {
form: { email: '' },
errors: {}
}
},
methods: {
validate() {
this.errors = {}
if (!this.form.email) this.errors.email = '必填字段'
},
submit() {
this.validate()
if (Object.keys(this.errors).length) return
// 提交逻辑
}
}
}
</script>性能优化
v-if 和 v-show 合理选择，避免不必要的重新渲染。列表使用 :key 提升 diff 效率。大型数据考虑虚拟滚动。
<template>
<div v-for="item in bigList" :key="item.id">
{{ item.name }}
</div>
</template>测试策略
单元测试验证组件逻辑，使用 Jest 或 Vitest。E2E 测试检查完整流程，推荐 Cypress。测试覆盖率应关注核心业务逻辑。
// 示例单元测试
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'
test('点击按钮增加计数', async () => {
const wrapper = mount(Counter)
await wrapper.find('button').trigger('click')
expect(wrapper.text()).toContain('1')
})
