阅读量: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!'); }); }; 这些示例展示了 Vue.js 在不同领域的高级用法，可以直接应用于实际项目中，并根据需求进行定制和扩展。
