面试复盘

发表于 本文字数： 2k 阅读时长 ≈ 2 分钟

# history 和 hash

应用：单页面应用的 URL 导航

Hash 模式， hash 值变化不会导致浏览器向服务器发出请求，通过监听 URL 中的 hash 值（# 及其后面的部分）来实现 路由切换 和 组件渲染 。

window.addEventListener(‘hashchange’, render)

History 模式利用 History API 中的 pushState 和 replaceState 方法来实现 URL 的导航，无需 # 号

1
2
3
4
5
6
7
8
window.addEventListener('popstate', function (event) {
    var state = event.state;
    if (state.page === 'about') {
    // 显示关于页面内容
    } else if (state.page === 'contact') {
    // 显示联系页面内容
    }
});

# computed 和 watch

# router 传参

  1. query

类似 get 传参，参数会在 url? 后面拼接，刷新页面参数不会丢失

1
router.push({path: '/user', query: {id: '1'}})
  1. params

类似 post 传参，需要提前在路由中配置 path: ‘/user/:id’

1
router.push({path: name, params: {id: '1'}})

# 组件通信

  1. props 和 emit（最直接的方式）

    父传子：父组件在子组件上 v-bind 或者：绑定父组件属性，子组件内部通过 props 获取父组件

    子传父：父组件通过 v-on 或者 @监听子组件事件，子组件通过 emit 发送事件

    特别的，v-model 是一种语法糖，v-bind 和 v-on 的结合，多用于双向绑定

    父组件使用 v-model:xxx 绑定一个变量

    子组件通过 props 定义 modelXxx 变量，使用 emit (‘update:modelXxx’, value) 发送事件更新变量

    需要注意

    也可以使用 defineModel (‘xxx’) 去定义变量

  2. Provide/Inject 依赖注入（多层级透传）

    应用与子组件多层次级的透传

    父组件通过 provide 提供数据，所有子孙组件都能通过 inject 注入数据

  3. 事件总线

    适用于共同父组件的子组件之间，使用 eventBus、mitt 库

     
    1
    2
    3
    4
    5
    6
    7
    const emitter = new mitt();
    // 派发事件
    emitter.emit('event-name', data)
    // 监听事件
    emitter.on('event-name', fn);
    // 在组件卸载时移除监听，以免造成性能消耗
    onUnmounted(() => { emitter.off('event-name', onFoo) });

  4. Composition API （state）

组合式 API 提供了一种更加灵活的方式使多个组件共享逻辑和状态

1
2
3
// ComponentA
const state = reactive({ count: 0 });
export default () => { return { state } };



1
2
// ComponentB
const { state } = useState();

  1. 全局状态管理 stroe（Pinia/Vuex）

    1
    2
    3
    4
    5
    // ComponentA
    export default const store = defineStore('storeName', () => {
        count: 0,
        return { count }
    })
    1
    2
    // ComponentB
    const store = useStore();

  2. ref 实例（破坏组件封装，侵入性强，不建议使用）

子组件通过 defineExpose 暴露方法，父组件通过子组件的 ref 实例调用子组件方法

1
2
3
4
<div ref="child"></div>
<script>
    defineExpose({ xxx:() => {} })
</script>



1
2
const child = ref(null);
child.value.xxx()s
  1. localStorage 和 sessionStorage

用于持久化数据存储

# HTTP 状态码

  • 1xx: 信息性状态码
  • 2xx: 成功状态码
  • 3xx: 重定向状态码
  • 4xx: 客户端错误状态码
  • 5xx: 服务器错误状态码