这里有一些实用的 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          !!v, message: '用户名不能为空' }})" />   
{{ errors.username }}
  

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!');   }); }; 

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