当前位置：首页 > news >正文

深入探究 Vue.js 高级技术：从响应式系统到高效组件设计的实战指南

news 来源：原创 2024/9/21 18:50:06

这里有一些实用的 Vue.js 高级示例，涵盖了前面提到的高级知识点，适合在实际项目中应用：

1. 自定义响应式数据

使用 Vue 3 的 customRef API 创建一个自定义的响应式输入框，带有防抖功能。

import { customRef } from 'vue';function useDebouncedRef(value, delay = 300) {let timeout;return customRef((track, trigger) => {return {get() {track();  // 追踪依赖return value;},set(newValue) {clearTimeout(timeout);timeout = setTimeout(() => {value = newValue;trigger();  // 触发更新}, delay);}};});
}export default {setup() {const debouncedInput = useDebouncedRef('', 500);return { debouncedInput };}
};

2. Renderless Component（无渲染组件）

创建一个 Renderless 组件，用于管理表单验证逻辑，而无需关注具体的表单 UI。

// FormValidator.vue
<template><slot :validate="validate" :errors="errors"></slot>
</template><script>
import { reactive } from 'vue';export default {setup(_, { slots }) {const errors = reactive({});function validate(rules) {Object.keys(rules).forEach(field => {const rule = rules[field];if (!rule.validator(rule.value)) {errors[field] = rule.message;} else {delete errors[field];}});}return { validate, errors };}
};
</script><!-- 使用示例 -->
<FormValidator v-slot="{ validate, errors }"><input v-model="form.username" @blur="validate({ username: { value: form.username, validator: v => !!v, message: '用户名不能为空' }})" /><p v-if="errors.username">{{ errors.username }}</p>
</FormValidator>

3. 动态导入与懒加载

结合 Vue Router 和 Webpack 的动态导入功能，实现组件的懒加载。

import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/dashboard',component: () => import(/* webpackChunkName: "dashboard" */ './components/Dashboard.vue'),},{path: '/profile',component: () => import(/* webpackChunkName: "profile" */ './components/Profile.vue'),}
];const router = createRouter({history: createWebHistory(),routes,
});export default router;

4. 权限控制与路由守卫

在 Vue Router 中使用全局守卫来实现用户权限控制。

import { createRouter, createWebHistory } from 'vue-router';
import store from './store';  // 假设 Vuex 或 Pinia 管理用户状态const router = createRouter({history: createWebHistory(),routes: [{ path: '/', component: Home },{ path: '/admin', component: Admin, meta: { requiresAuth: true } },],
});router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !store.state.isAuthenticated) {next('/login');} else {next();}
});export default router;

5. Apollo Client 与 GraphQL 集成

使用 Vue 结合 Apollo Client 查询 GraphQL 数据，并管理全局状态。

import { ref } from 'vue';
import { useQuery, gql } from '@apollo/client';const GET_USER = gql`query GetUser($id: ID!) {user(id: $id) {idnameemail}}
`;export default {setup() {const userId = ref(1);const { loading, error, data } = useQuery(GET_USER, {variables: { id: userId.value },});return { loading, error, data };}
};

6. 自定义 Vue CLI 插件

创建一个简单的 Vue CLI 插件，用于为新项目生成标准化的目录结构和配置。

module.exports = (api, options) => {api.render('./template');api.extendPackage({scripts: {lint: 'eslint --ext .js,.vue src/',},dependencies: {axios: '^0.21.1',},devDependencies: {'eslint-plugin-vue': '^7.0.0',}});api.onCreateComplete(() => {console.log('Custom Vue CLI plugin installed!');});
};