一个前端工作5年的大佬出的面试题，看看你可以答对几道

JS面试题

• 下面代码输出是什么?

  function sayHi() {
        console.log(name)
        console.log(age)
        var name = 'Lydia'
        let age = 21
      }
      sayHi()

undefined 报错 （var有变量提升，let没有，所以在使用let时候会报错，使用前未定义）

• 下面代码输出什么?

      const shape = {
        radius: 10,
        diameter() {
          return this.radius * 2
        },
        perimeter: () => 2 * Math.PI * this.radius
      }
      shape.diameter()
      shape.perimeter()

20 NAN (this指向问题，第二个是NAN是因为隐式转换，箭头函数中this.radius为undefined所以隐式转换时默认使用Number方法，最终是NAN)

• 请问以下程序的输出是?

    function Foo(){
        var i = 0;
        return function(){
          console.log(i++);
        }
      }
      var f1 = Foo(),
      f2 = Foo();
      f1();
      f1();
      f2();

0 1 0 (闭包，两个注意点，保存父级作用域变量，i++是先使用再加)

• 创建一个函数，实现字符串转化为驼峰

 var res = /-([a-z])/g
        var ss = "ss-qsd-i"
        ss = ss.replace(res,(p,v)=>{
            console.log(p)
            console.log(v)
            return v.toUpperCase()
        })

• 下面代码输出什么?

      const promise = new Promise((resolve, reject) => {
        console.log(1)
        resolve()
        console.log(2)
      })
      promise.then(() => {
          console.log(3)
      })
      console.log(4)

1243 (事件循环，注意：promise是同步，上来就执行，.then才是执行的异步操作。)

• GET 和 POST 的区别，何时使用 POST?

1. get请求的参数是明文的（http://localhost:8080?id=1）post请求的参数放在request body里边 所以相对来说，post比get要更安全
2. get请求的url的长度由于浏览器和web服务器的限制，所以长度会有限制，但是post的参数没有限制
3. get请求会被浏览器记录（比如我常删除历史记录）但是post请求不会。
4. 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
5. GET产生一个TCP数据包；POST产生两个TCP数据包。对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
6.GET有缓存，POST没有

Vue面试题

• 说说 v-show 和 v-if 的区别

v-if判断是否进行DOM节点的创建和销毁，消耗较大，而v-show是控制css样式（display：none，display：block）。消耗较少，所以当页面需要判断是否出现的次数较多时，适合用v-show。

• Vue 组件间如何通信

$emit props vuex v-model provide inject 浏览器本地存储 ref $children $parent $attr $listener等方式

• Vue 父组件和子组件的生命周期执行顺序(初始化时， 子组件 data 更新时)

父组件处理自己的数据 data (beforecreate created) --> 要开始渲染了(beforeMount) --> 解析子组件, 子组件处理自己的数据 (beforeCreate created)–>子组件开始渲染(beforeMount mounted)—>父组件渲染完毕(mounted)

子组件 data 更新时

子组件的自己的更新 ：beforeUpdate Updated父组件不变（diff算法，虚拟DOM会尽量减少重排重绘）

父组件改变子组件时：父 beforeUpdate 子 beforeUpdate Updated 父 Updated

• Vuex 为什么要分模块并且加命名空间

模块:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。
当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。
命名空间：默认情况下，模块内部的 action、mutation 和 getter 是注册
在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应
。如果希望你的模块具有更高的封装度和复用性，你可以通过添加 
namespaced: true
 的方式使其成为带命名空间的模块。当模块被注册后，
 它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

• Vuex 页面刷新数据丢失怎么解决

把数据存储到浏览器本地缓存中（LocalStorage,SessionStorage）或者是一些其他的第三方插件

• 你都开发过程中做过哪些 Vue 的性能优化

对象层级不要过深，否则性能就会差
不需要响应式的数据不要放到 data 中（可以用 Object.freeze() 冻结数据）
v-if 和 v-show 区分使用场景
computed 和 watch 区分使用场景
v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
大数据列表和表格性能优化-虚拟列表/虚拟表格
防止内部泄漏，组件销毁后把全局变量和事件销毁
图片懒加载
路由懒加载
第三方插件的按需引入
适当采用 keep-alive 缓存组件
防抖、节流运用
服务端渲染 SSR or 预渲染