vue 实现 功能
在 Vue 中实现功能通常涉及组件化开发、状态管理、路由控制等核心概念。以下是常见功能的实现方法：
组件化开发
通过单文件组件（.vue文件）组织代码结构，包含<template>、<script>和<style>三部分。例如实现一个计数器组件：
<template>
<div>
<button @click="decrement">-</button>
<span>{{ count }}</span>
<button @click="increment">+</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
}
</script>状态管理
对于跨组件状态共享，可使用Vuex或Pinia。以Pinia为例创建store：
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++
}
}
})路由控制
使用vue-router实现页面导航：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router生命周期钩子
利用生命周期函数处理特定阶段的逻辑：
export default {
created() {
console.log('组件已创建')
},
mounted() {
console.log('DOM挂载完成')
}
}计算属性与侦听器
处理响应式数据依赖：
export default {
data() {
return {
firstName: '张',
lastName: '三'
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
},
watch: {
firstName(newVal) {
console.log('firstName变化:', newVal)
}
}
}自定义指令
扩展模板功能：
// 全局注册
app.directive('focus', {
mounted(el) {
el.focus()
}
})
// 使用
<input v-focus />根据具体需求选择合适的技术方案，Vue的组合式API（setup语法）可提供更灵活的代码组织方式。
