当前位置：首页 > VUE

vue业务功能实现

2026-01-17 21:34:13VUE

Vue业务功能实现指南

数据绑定与响应式更新

使用v-model实现表单双向绑定，结合Vue的响应式系统自动更新DOM。对于复杂对象，可通过Vue.set()或this.$set()确保属性响应式。

<template>
  <input v-model="user.name" placeholder="Edit name">
</template>

<script>
export default {
  data() {
    return { user: { name: '' } }
  }
}
</script>

组件化开发

将功能拆分为可复用组件，通过props传递数据，$emit触发父组件事件。使用插槽(<slot>)实现内容分发。

vue业务功能实现

// ChildComponent.vue
<template>
  <button @click="$emit('custom-event', payload)">Submit</button>
</template>

// ParentComponent.vue
<template>
  <ChildComponent @custom-event="handleEvent"/>
</template>

状态管理

复杂应用采用Vuex管理全局状态。定义state、mutations、actions和getters集中处理数据流。

// store.js
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  }
})

// Component.vue
methods: {
  increment() {
    this.$store.commit('increment')
  }
}

路由控制

使用vue-router实现SPA路由，配置动态路由、嵌套路由和导航守卫。

vue业务功能实现

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true }
  ]
})

// 组件内访问路由参数
this.$route.params.id

API交互

封装axios实例，结合async/await处理异步请求。建议使用拦截器统一处理错误和loading状态。

// api.js
const api = axios.create({
  baseURL: 'https://api.example.com'
})

api.interceptors.response.use(
  response => response.data,
  error => Promise.reject(error)
)

// Component.vue
async fetchData() {
  try {
    this.data = await api.get('/endpoint')
  } catch (error) {
    console.error(error)
  }
}

性能优化

使用v-if和v-show按需渲染
对长列表采用virtual-scroller
组件使用<keep-alive>缓存
路由懒加载：component: () => import('./Component.vue')

自定义指令与插件

扩展Vue功能，封装全局指令或插件。

// 注册全局指令
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

// 使用插件
const plugin = {
  install(Vue) {
    Vue.prototype.$myMethod = function() {...}
  }
}
Vue.use(plugin)