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语法）可提供更灵活的代码组织方式。