十道前端面试题，你真的准备好了吗？最近面试了两家公司，总结了以下十个问题。都不是很难，但是有的问题需要提前准备，因为在面

最近面试了两家公司，总结了以下十个问题。都不是很难，但是有的问题需要提前准备，因为在面试现场清楚的，有逻辑的向面试官表达也是有一定难度的（受限于自身当天的状态，自身的表达能力等因素）。本人就是，说下面的这些问题我真的不清楚吗？并不是，我都可以答上来。但是因为没有事先准备，在面试现场，虽然我都答上来了。但是自己却很不满意，因为明显感觉缺少了条理，或者说逻辑表达不清楚。势必也会给面试官一个不太好的印象。题目也不是制造焦虑，如果大家还没有参加面试，那么建议大家找十道题。然后模拟被面试官问道，你把自己的回答录音下来。然后听一遍，看自己是否清晰，有逻辑的表达了想要表达的内容。当然了，也可以边面试边复盘，效果会更加好。

1. 自我介绍

主体就是一句话，让面试官记住你。

突出自己的专业能力。
突出自己的积极性与重要性。

2. vue点击按钮显示input输入框并且使input获得焦点

核心点是响应式数据更新之后，DOM不会立即刷新，所以要使用$nextTick()方法。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div>
        <template v-if="showFlag">
          <input type="text" ref="inputRef" />
        </template>
        <div>
          <button @click="handleShowInput">{{ showMessage }}</button>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      // 点击按钮，显示input输入框并且显示焦点
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            showFlag: false,
          }
        },
        computed: {
          showMessage() {
            return this.showFlag === true ? '隐藏' : '显示'
          },
        },
        methods: {
          handleShowInput() {
            this.showFlag = !this.showFlag
            // 因为状态发生变化之后，dom不会立即更新，所以需要nextTick在DOM更新在以后去操作input输入框的状态
            this.$nextTick(() => {
              this.$refs['inputRef']?.focus()
            })
          },
        },
      })
    </script>
  </body>
</html>

3. computed和watch的区别，使用的时机。

计算属性 computed

特点

支持缓存，只有依赖数据发生改变，才会重新进行计算；
不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化；
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的。也就是基于 data 中声明过或者父组件传递的 props 中的数据通过计算得到的值；
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed；

优点

当改变 data 变量值时，整个应用会重新渲染，vue 会被数据重新渲染到 dom 中。这时，使用 computed 不会重新进行计算，从而性能开销比较小。当新的值需要大量计算才能得到，缓存的意义就非常大；
如果 computed 所依赖的数据发生改变时，计算属性才会重新计算，并进行缓存；当改变其他数据时，computed 属性并不会重新计算，从而提升性能；
当拿到的值需要进行一定处理使用时，就可以使用 computed；

侦听属性 watch

特点

不支持缓存，数据变化，直接会触发相应的操作；
watch 支持异步操作；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作，一对多；
监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据。当数据变化时触发其他操作，函数有两个参数： immediate：组件加载立即触发回调函数执行； deep: 深度监听；为了发现对象内部值的变化，复杂类型的数据时使用，例如：数组中的对象内容的改变，注意：监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到；

注：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，这是和 computed 最大的区别。

4. v-for和v-if的能不能一起使用？为什么？

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。也就是说可以一起使用，但是由于性能问题，官方建议我们不要一起使用。请看下面的例子

为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

来自官方的实例代码

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

5. 获取两个数组的交集

const nums1 = [1, 2, 2, 1]
const nums2 = [2, 3, 4, 5]
const set = new Set()
const res = []
for (const num of nums1) {
    if (nums2.includes(num)) {
        set.add(num)
    }
}
res = [...set]

6. keep-alive的实现，如何实现一个画面滑动到中间，然后跳转到另一个画面，返回到上一个画面怎么保存状态。

keep-alive实现页面缓存踩坑

7. 性能优化，长列表渲染。从一个页面跳转到另一个页面，另一个页面会加载很多的echats图表，怎么做性能优化？

正在准备中....

8. 下面几段代码中obj1中的b值会不会发生变化

场景1

const obj1 = {a: 0,b: 1};
const obj2 = {...obj1,b: 2};

场景2

const obj3 = {...obj1}
obj3.b=3;

场景3

const obj11 = {a: 0,b: {c:3},};
const obj21 = {...obj11,b: {c:4},};

9. 影响深刻的技术问题。

需要提前准备，遇到什么问题？怎么思考，怎么解决的。要有条理，临时想不靠谱。

十道前端面试题，你真的准备好了吗？