摘要：
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它支持多种设计模式和最佳实践来帮助开发者创建高效、可维护的应用程序。以下是几种常见的 Vue 设计模式：
1. 单文件组件 (Single File Components, SFC)
这是 Vue 的核心特性之一，允许你在一个 .vue 文件中定义模板、脚本和样式。这种方式使得代码组织更加清晰，便于维护。
<template><div class="example">Hello, World!</div>
</template><script>
export default {name: 'ExampleComponent',data() {return {message: 'Hello, World!'}}
}
</script><style scoped>
.example {color: blue;
}
</style>
2. 组合式 API (Composition API)
Vue 3 引入了组合式 API，它提供了一种更灵活的方式来组织和重用逻辑代码。通过 setup 函数，你可以将相关的逻辑分组到一起，并且可以轻松地在不同的组件之间共享这些逻辑。
import { ref, computed } from 'vue';export function useCounter(initialValue = 0) {const count = ref(initialValue);const increment = () => count.value++;const decrement = () => count.value--;const doubleCount = computed(() => count.value * 2);return { count, increment, decrement, doubleCount };
}
然后可以在组件中使用这个组合函数：
<template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { useCounter } from './useCounter';export default {setup() {const { count, increment, decrement, doubleCount } = useCounter(5);return { count, increment, decrement, doubleCount };}
};
</script>
3. 插槽 (Slots)
插槽是 Vue 提供的一种内容分发机制，它允许父组件向子组件传递自定义的内容。这有助于创建高度可复用的组件。
<!-- ParentComponent.vue -->
<template><ChildComponent><template #header><h1>Here might be a page title</h1></template><p>A paragraph for the main content.</p><template #footer><p>Here's some contact info</p></template></ChildComponent>
</template>
<!-- ChildComponent.vue -->
<template><div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>
4. Vuex 状态管理
对于大型应用，状态管理变得非常重要。Vuex 是 Vue 的官方状态管理库，它采用集中式的存储管理所有组件的状态，并以预定义的方式进行状态变更。
- State：存储应用的状态。
- Getters：从 state 中派生出一些状态。
- Mutations：提交更改 state 的方法，必须是同步的。
- Actions：处理异步操作并可以提交多个 mutations。
- Modules：将 store 分割成模块，每个模块拥有自己的 state、mutation、action 和 getter。
// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {doubleCount: state => state.count * 2}
});
5. 路由 (Vue Router)
Vue Router 是 Vue 的官方路由管理器。它与 Vue.js 核心深度集成，允许你构建单页面应用程序 (SPA)。路由匹配到不同的 URL 时会渲染不同的组件。
// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';Vue.use(Router);export default new Router({routes: [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',component: About}]
});
6. 自定义指令 (Custom Directives)
Vue 允许你注册自定义指令，以便在特定情况下对 DOM 元素进行操作。这对于需要直接访问 DOM 场景非常有用。
Vue.directive('focus', {inserted(el) {el.focus();}
});// 使用
<input v-focus />
7. 高阶组件 (Higher Order Components, HOC)
虽然 Vue 不像 React 那样有明确的高阶组件概念，但你可以通过创建一个返回新组件的函数来实现类似的功能。这在封装逻辑或增强组件功能时非常有用。
function withLoading(Component) {return {data() {return {isLoading: false};},render(h) {return this.isLoading ? <div>Loading...</div> : h(Component, this.$slots.default);}};
}// 使用
const EnhancedComponent = withLoading(MyComponent);
8. Mixins
Mixins 是一种分发 Vue 组件复用功能的方法。一个 mixin 对象可以包含任意数量的选项，如 data、computed、methods 等。当一个组件使用 mixin 时，mixin 的选项会被“混入”到该组件的选项中。
const myMixin = {data() {return {sharedData: ''};},methods: {sharedMethod() {console.log('This is a shared method.');}}
};export default {mixins: [myMixin],// ...
};
9. Provide / Inject
这是一种新的依赖注入方式，适用于父子组件之间的通信。provide 选项允许我们定义可以从任何后代组件注入的属性，而不需要显式地通过 props 逐层传递。
// 父组件
export default {provide() {return {user: this.user};},data() {return {user: { name: 'John Doe' }};}
};// 子组件
export default {inject: ['user'],mounted() {console.log(this.user.name); // 输出 "John Doe"}
};
10. Lifecycle Hooks
Vue 组件有一个完整的生命周期，从创建到销毁的过程中，我们可以监听不同阶段的钩子函数来进行相应的操作。例如，在组件挂载后执行某些初始化逻辑，或者在组件卸载前清理资源。
export default {created() {console.log('Component created');},mounted() {console.log('Component mounted');},beforeDestroy() {console.log('Component about to be destroyed');}
};
