2021前端面试题（1）

1. vue 中 v-if 和 v-show 的区别是什么？

       答案：  v-show 只是在 display： none 和 display ：block  之间切换。无论初始条件是什么都会被渲染出来，后面只需切换css，DOM还是一直保留着的
                   v- if  的话就得说到Vue底层的逻辑了，当属性初始为false时，组件就不会被渲染，直到条件为 true ,并且切换条件是会触发销毁/挂载组件，并且基于v-if 的这种惰性渲染机制，可以在必要的时候才去渲染组件，减少整个页面的初始渲染开销。
                   
                   **简单来说，v-show 通过是控制元素的显示与隐藏           v-if 是控制元素的创建与销毁。**
   

2. vue 中 keep-alive 组件有什么作用？

       答案： 如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用keep-alive 组件包裹需要保存的组件
            对于 keep-alive 组件来说，它拥有两个独有的生命周期钩子函数，分别为actived 和 deactived 。 **用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存**中并执行deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数
   

3. 说下 vue 生命周期钩子函数？

    答案:
                 beforeCreate： 这个时期， this 变量还不能使用， 在data 下的数据和methods 下的方法，watcher 中的事件 都不能获得到
                          created:   这个时候可以操作vue 实例 中的数据和各种方法， 但是还不能对 dom  节点进行操作
             beforeMounted：在挂载开始之前被调用，相关的render 函数首次被调用
                       mounted：挂载完毕，这是dom 节点被渲染到文档内，一些需要dom  的操作在此时才能正常运行
               beforeUpdate：data 中数据已经更新完毕，页面视图还未响应更改
                        updated:  数据和视图都更新完毕
              beforeDestroy:  销毁之前，实例上事件、指令等都可以使用，这里组件并没有真正的销毁
                     destroyed:  数据、指令等完全销毁
   

4. vue 中 computed 和 watch 的区别？

    答案：
               **computed       计算属性**
                      通过属性计算而得来的属性
                             1、computed内部的函数调用的时候不需要加（）
                             2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，                  如果data中的属性没有发生改变，则当前函数不会执行
                            3、computed中的函数必须用return返回最终的结果
                            4、在computed中尽量不要去修改data中的属性值，简单来说就是不要在computed中对data的属性做赋值操作
                            5、当computed中的幻术所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取
               使用的场景：
                        当一个属性受多少属性影响的时候就需要用到computed
                        最典型的例子：购物车商品结算的时候
   
                **watch    属性监听  监听属性的变化**
                             1、watch中的函数名称是data中的属性名称，因为watch也是依赖data中的属性，当data中的属性发生改变的时候， watch中的函数就会执行。
                             2、watch中的函数都有2个参数，一个是新值一个是旧的值
                             3、watch中的函数是不需要调用的
                             4、watch只会监听数据的值是否发生变化，而不会去监听数据的地址是否发生改变，如果需要监听对象的变化的时候，需要进行深度监听deep+handler
                             5、特殊情况下watch是监听不到数组的变化的，例如数据的修改  通过length来清空数组
                             6、如果想要检测到数组的变化则需要用splice  或者  $set
                             7、immediate用来做页面首次加载的时候做一次监听
   

5. 有没有写过Koa 中间件，说下 中间件原理，介绍下自己写过的中间件？

     答案：
                koa 本来就是一个轻量级框架，本身支持的功能并不多，功能都是通过中间件来实现不同的需求，开发者可以通过不同的中间件来按需求扩展不同的功能。
                koa 中中间件本质上就是函数，可以是一个async函数，也可以是一个普通的函数，如下代码：
   

const Koa = require("koa")
const app = new Koa()
// 普通函数
const middleWare1 = function(ctx,next){
    return next().then(()=>{
        console.log("I am a people")
    })
}
// async函数
const middleWare2 = async function(ctx,next){
    console.log("I am a people")
    await next()
}
app.use(middleWare1)
app.use(middleWare2)

          中间件原理： 中间件会遵循洋葱模型，中间件执行循序并不是从头执行到尾，而是会先执行最外层中间件，当调取next() 函数后进入下一个中间件执行，一路执行到最里层中间件，然后再从最里层执行到最外层

6. 如何判断当前脚本运行在浏览器还是node环境中？

   答案：
   可以通过判断在浏览器端或者是node端独特的全局对象来区分环境。例如：浏览器端的window 或者是 node 端的process 全局对象。具体代码如下：

if(typeof process !== 'undefined'){
 console.log("node")
}else{
  console.log("浏览器")
}

7. 请描述一下 cookies sessionStorage 和localStorage 的区别？

        答案：
                 相同点:  都存储在客户端
                 不同点：
                               1. 存储大小
   
                             
                                        cookie 数据大小不能超过4kb
                                        sessionStorage 和 localStorage 虽然也有存储大小限制，但比cookie 大的多，可以达到5M 或者更大
                              
                              2.       有效时间
                                          localStorage  存储持久数据，浏览器关闭后数据不丢失 除非主动删除
                                          sessionStorage  数据在当前浏览器窗口关闭后自动删除
                                          cookie 设置的cookie 过期时间之前一直有效，即使窗口或浏览器关闭
                                          
                              3.       数据与服务器之间的交互方式       
                                            cookie 的数据会自动的传递到服务器，服务器端也可以写cookie 到客户端
                                            sessionStorage 和 localStorage 不会自动把数据发给服务端，仅在本地保存 
   

8. 介绍一下 node 常用模块，并详细介绍下Stream？

      答案:
                  常用模块如: 内置模块http ，通过 http 来构建 本地服务器，例如：
   

const http = require("http")
const server = http.createServer((res,req)=>{
    res.write('hello world')
    res.end()
})
server.listen(8888)

 同样也可以通过 http 实现服务店的网络请求。
 还有fs 模块可以通过fs 模块实现服务端的文件操作，实现服务端文件的增删改查操作。
 还有 path 模块提供各种处理路径的api , body-parser 模块来处理接收 post 请求到服务端的数据。

stream 流是一种抽象数据结构，可以用它来读取和写入数据，通过流来读取和写入数据可以防止内存溢出，采取流方式处理数据会把数据分成64k 小块数据，异步依次来进行传递，更加节约性能。

9. 如何中断 Ajax 请求？

      答案：
                原生里可以通过XMLHttpRequest 对象上的 abort() 方法来中断 Ajax。 注意 abort() 方法不能阻止向服务器发送请求，只能停止当前Ajax 请求。
   

10. 什么是同步？ 什么是异步？

     答案：
              同步和异步是一种消息通知机制
              同步阻塞：A调用 B. B处理获得结果，才返回给A。 A在这个过程中，一直等待 B 的处理结果，没有拿到结果之前，需要A(调用者) 一直等待和确认调用结果是否返回，拿到结果，然后继续往下执行。
               做一件事，没有拿到结果之前，就一直在这等着，一直等到有结果了，再去做下边的事。
               
             异步非阻塞： A 调用B  无需等待B 的结果，B通过状态，通知等来通知A或者回调函数来处理。