谷粒商城实战笔记-125-全文检索-ElasticSearch-整合-SpringBoot整合high-level-client-CFANZ编程社区

Vue 3 被称为 "应用（Application）" 是因为它不仅仅是一个前端框架，更是一个完整的解决方案，旨在帮助开发者构建复杂的、动态的单页应用（SPA）。它提供了一整套工具和生态系统，从数据绑定到组件化开发，从路由管理到状态管理，几乎涵盖了前端开发的所有方面。

1. 组合式 API（Composition API）

Vue 3 引入的组合式 API 允许开发者通过组合函数来组织代码，使得代码更具模块化和复用性。在 Vue 3 之前，Options API 是主要的编程方式，它通过在 data、methods、computed 等选项中定义组件的逻辑。而组合式 API 则允许开发者在 setup 函数中使用钩子函数和响应式数据，使得逻辑更加集中和易于管理。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

2. 响应式系统

Vue 3 的响应式系统使用 Proxy 代替了 Vue 2 的 Object.defineProperty，这使得 Vue 3 能够更高效地跟踪数据变化，并且能够更好地支持复杂的数据结构，如嵌套对象和数组。

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

function increment() {
  state.count++
}

3. 模块化开发

Vue 3 强调组件化和模块化开发，每个组件都是一个独立的模块，可以包含自己的模板、逻辑和样式。这种设计模式使得代码更易于维护和复用。

// src/components/Counter.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

<style scoped>
button {
  color: blue;
}
</style>

4. 路由管理

Vue Router 是 Vue 应用的官方路由解决方案。它允许开发者定义多视图应用，配置不同路径对应的组件，从而实现复杂的导航结构。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

5. 状态管理

Vuex 和 Pinia 是 Vue 应用的状态管理库。它们允许开发者在应用的不同部分共享状态，提供了集中式的状态管理模式，使得状态的管理和调试变得更加容易。

使用 Vuex

// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  modules: {}
})

使用 Pinia

// src/store/index.js
import { createPinia, defineStore } from 'pinia'

const store = createPinia()

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

export default store

6. 全局状态和依赖注入

Vue 3 支持依赖注入，使得父组件可以将数据注入到子组件中，简化了全局状态的管理。

// src/components/Provider.vue
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
import { provide, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    provide('count', count)

    return {
      count
    }
  }
}
</script>

// src/components/Consumer.vue
<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  setup() {
    const count = inject('count')

    return {
      count
    }
  }
}
</script>

7. 插件系统

Vue 3 支持插件机制，开发者可以编写和使用插件扩展 Vue 的功能，比如全局组件、指令、过滤器等。

// src/plugins/myPlugin.js
export default {
  install(app) {
    app.config.globalProperties.$myMethod = function() {
      console.log('This is a plugin method')
    }
  }
}

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import myPlugin from './plugins/myPlugin'

const app = createApp(App)

app.use(router)
app.use(store)
app.use(myPlugin)

app.mount('#app')

8. TypeScript 支持

Vue 3 原生支持 TypeScript，使得大型应用的开发更加可靠和可维护。

// src/components/Counter.ts
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref<number>(0)
    const increment = (): void => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
})
</script>

举例说明：Todo 应用

下面是一个简单的 Todo 应用，演示了 Vue 3 的各项特性：

1. 初始化项目

使用 Vue CLI 初始化项目，并安装必要的依赖：

vue create todo-app
cd todo-app
npm install vue-router@next vuex@next

2. 创建 Todo 组件

<!-- src/components/Todo.vue -->
<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a todo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo.id)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const newTodo = ref('')
    const todos = ref([])

    const addTodo = () => {
      todos.value.push({ id: Date.now(), text: newTodo.value })
      newTodo.value = ''
    }

    const removeTodo = (id) => {
      todos.value = todos.value.filter(todo => todo.id !== id)
    }

    return {
      newTodo,
      todos,
      addTodo,
      removeTodo
    }
  }
}
</script>

3. 配置路由

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Todo from '../components/Todo.vue'

const routes = [
  {
    path: '/',
    name: 'Todo',
    component: Todo
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

4. 配置状态管理

// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    removeTodo(state, id) {
      state.todos = state.todos.filter(todo => todo.id !== id)
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('addTodo', todo)
    },
    removeTodo({ commit }, id) {
      commit('removeTodo', id)
    }
  },
  modules: {}
})

5. 主入口文件

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')