TWO

一面

1. CSS

div不用设置width:100%，本身就可以铺满一行

浮动后就不一样的（比如圣杯、双飞翼布局），center要设置width:100%;

2. ES6语法

/**
现有三种菜单：button 类型，select 类型，modal 类型。
- 共同特点
    - title icon 属性
    - isDisabled 方法（可直接返回 false）
    - exec 方法，执行菜单的逻辑
- 不同
    - button 类型，执行 exec 时打印 `'hello'`
    - select 类型，执行 exec 时返回一个数组 `['item1', 'item2', 'item3']`
    - modal 类型，执行 exec 时返回一个 DOM Element `<div>modal</div>`

用 ES6 语法写出这三种菜单的 class 。
 */

class BaseMenu {
    constructor(title, icon) {
        this.title = title
        this.icon = icon
    }
    isDisabled() {
        return false
    }
}

class ButtonMenu extends BaseMenu {
    constructor(title, icon) {
        super(title, icon)
    }
    exec() {
        console.log('hello')
    }
}

class SelectMenu extends BaseMenu {
    constructor(title, icon) {
        super(title, icon)
    }
    exec() {
        return ['item1', 'item2', 'item3']
    }
}

class ModalMenu extends BaseMenu {
    constructor(title, icon) {
        super(title, icon)
    }
    exec() {
        const div = document.createElement('div')
        div.innerText = 'modal'
        return div
    }
}

3. 普通函数vs箭头函数 this指向

call不能改变箭头函数的this

4. class的this指向

5. JS异步

自PS：大概

同步栈 -> 微任务执行 -> dom渲染 -> 执行事件循环 -> 异步队列里执行宏任务的回调函数

6. 垃圾回收

引用计数【IE67 JS对象与DOM对象循环引用的问题】

标记清除 【现代浏览器（JS引擎）】

7. WeakMap和WeakSet有什么作用？

应用场景：比如你想临时记录数据或关系的时候，又不想导致内存泄漏，就用它们。
它们是弱引用，不会影响彼此的内存清理。

8. “栈溢出”是什么？JS执行和栈溢出有什么关系？

例如递归次数太多，会导致stack overflow

9. Vue3自定义v-model，手写代码

父组件

<template>
  <div class="father">
    <p>
      父组件text值：{{ text }}
    </p>
    <son v-model="text"></son>
  </div>
</template>
<script>
import { ref } from 'vue'
import Son from './Son.vue'

export default {
  name: 'Father',
  components: {
    Son
  },
  setup(props,context) {
    const text = ref('v-model文本');
    return {
      text
    }
  }
}
</script>

子组件

<template>
  <div class="son">
    <input :value="modelValue" @input="inputHandle">
  </div>
</template>
<script>
export default {
  name: 'Son',
  <!--注意这里props里modelValue的值类型和默认值设置-->
  <!--modelValue好像不能换别的值-->
  props: {
    modelValue: {
      type: String,
      default:''
    }
  },
  <!--注意不再是this.emit，而是context.emit-->
  <!--context参数对组件暴露三个属性:attrs、slots、emit-->
  setup(props, context) {
    function inputHandle(e) {
      context.emit('update:modelValue', e.target.value);
    }
    return {
      inputHandle
    }
  }
}
</script>

10. Vue3 心跳检测

组件对定时器的处理：销毁时清除

Vue3用ref存东西（不是什么let、const了）

中间网页有卡顿的话，那setInteval就不能延续了（但对这题不太重要）

11. Vue3封装useLocation

Vue配置前端跨域 vue.config.js

二面

1. 用JS实现队列 出队、入队、长度

2. 动态规划 走格子

3. Vue3响应式原理考察

4. Vue3比Vue2 diff算法带来的变化

5. 从0搭建项目环境，考虑哪些？

Three

一面

1. ES6和TS带来了什么价值？

2. Http

URL有哪些组成部分？ 分别对应JS中location什么属性？

比如location.search为"?a=10&b=20"，怎么根据key拿到对应value

API方法 URLSearchParams

split() 方法用于把一个字符串分割成字符串数组

3. Vue-router或React-router如何定义和获取路由的动态参数？

Vue获取方法this.$route.params.id

this.$router.push()是导航方法

4. Webpack有哪些配置项【大概是下面这些，具体看官网】

1. mode
2. entry
3. output
4. modules
5. plugins
6. devServer
7. devTools

二面

1. 手写二分查找 时间复杂度O(logn) [快速排序是O(nlogn)]

// 二分查找的前提是有序序列
let arr = [1,5,6,8,11,16,46,57];
console.log(binary(arr,5));
function binary(arr,value) {
  let l = 0, r = arr.length - 1;
  while (l<r) {
    let mid = (l + r) >> 1;
    if (arr[mid] >= value) r = mid;
    else if (arr[mid] < value) l = mid + 1;
  }
  return arr[r]==value?arr[r]:"没找到"; 
}

2. 二叉树的前中后序遍历

1. 前序：根左右
2. 中序：左根右
3. 后续：左右根

3. 如何理解数据驱动视图

自补充：diff算法好：用JS计算vdom的最小变更去更新DOM，高性能，高效率。

4. Vue和React函数组件的区别

5. 设计模式在前端开发中的应用场景？

6. 了解WebAssembly吗【看你是否了解前端周边的技术】