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

这里有一些实用的 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 };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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 };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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!');
  });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这些示例展示了 Vue.js 在不同领域的高级用法，可以直接应用于实际项目中，并根据需求进行定制和扩展。