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

发布时间:2024-08-03 05:59

阅读量:0

这里有一些实用的 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) {       id       name       email     }   } `;  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!');   }); };