前端面试宝典

1. 手写按钮权限自定义指令

// directives/permission.js
const userPermissions = ['edit', 'delete']; // 后端返回权限

export default {
  mounted(el, binding) {
    const needPerm = binding.value;
    // 无权限直接移除元素
    if (!userPermissions.includes(needPerm)) {
      el.style.display = 'none';
      // el.remove(); 也可直接删除
    }
  }
};

// main.ts 注册
import { createApp } from 'vue';
import App from './App.vue';
import permission from './directives/permission';
const app = createApp(App);
app.directive('permission', permission);
app.mount('#app');

// 使用
<button v-permission="'edit'">编辑</button>

2. Vue3 SSR 核心注意点

1. 无 window/document 对象，生命周期只执行到 setup；
2. 数据预取：useAsyncData/getServerSideProps；
3. 避免状态单例：导出工厂函数，每次请求创建实例；
4. 打包：客户端+服务端双 bundle，服务端渲染 HTML，客户端激活。