面经记录

vitaler
160 阅读5分钟

前言

面了老家的一家公司，面之前觉得老家这种三线城市能有什么高端的技术呢，无非就是问一些常见的问题，但是面试官一上来就给我当头一棒，让我知道人外有人，还是要有敬畏之心

1、nuxt怎么获取环境变量

这个主要是我写了nuxt项目 所以会问（我以为老家没人问ssr） 首先市面上可以使用很多插件去获取，这里简单说下不引用插件的方法

// package.json
"scripts": {
    "dev": "nuxt --mode dev",
}

// 业务代码获取
console.log(process.env.npm_lifecycle_script.match(/--mode\s(.*)/)?.[1]);

主要是不能直接通过process.env获取 需要加后npm_lifecycle_script获取整条命令 然后正则去匹配

2、怎么区分nuxt 客户端部分和服务端部分

我答的也不好，也不知道自己理解的对不对
首先生命周期上 nuxtServerInit 属于初始化服务应该是服务端
serverMiddleware 是在 vue-server-renderer之前在服务器端运行，可用于服务器特定的任务，如处理 API 请求或服务资产。答了个这个
module模块属于nuxt的扩展 而且是能用node的api应该也是服务端
客户端的话 正常的业务逻辑 vue文件是在客户端

3、nuxt 的asyncData 和fetch的区别

应该有两点不同 只答出来一点
1、首先asyncData是在实例化之前 所以无法获取this fetch可以
2、asyncData只能用在主页面 不能在组件上使用 fetch都可以

4、cookie的属性

1、key & value
2、domain 设置为子域和当前域的时候子域和当前域都能携带 不设置的时候只有当前域携带
3、path 设置能携带cookie的路径 一般不用
4、expires 绝对时间 日期
5、max-age 相对时间 秒 负值立即删除 正直到期删除 优先级更高
（这里又问了默认过期时间，网上有说20分钟，我就答了20分钟，但是又有种说法是上述两个过期时间字段都不设置的话就会默认是会话级别的session cookie，注意是关掉浏览器清除 而不是关掉窗口清除）
6、httpOnly 设置这个只能服务端去设置cookie 客户端不能设置
7、secure 只能通过https访问
8、samesite 限制跨站请求
none ： 不论是否跨站都发送cookie 必须https secure
lax ： 默认值，部分情况下携带cookie
strict ： 跨站不带cookie
lax： a、 预加载、 get 表单 会发送 post表单 iframe ajax image src 不会cookie

9、Priority 当Cookie的数量超过限制时，浏览器会清除一部分Cookie 按该字段的三个值优先级来 Priority属性有三种： Low, Medium, High

5、跨域携带cookie

首先说了我实际遇到的问题跟解决方案，其实就是
1、客户端请求时设置"withCredentials=true"
2、服务端在response的header中配置"Access-Control-Allow-Origin", "白名单";
3、服务端在response的header中配置"Access-Control-Allow-Credentials", "true"
追问:如果设置白名单那写了*有什么问题
*就是指支持所有地址跨域访问 会带来安全上的问题

6、vue全局错误捕获的原理

// 主要是我写了看过源码，他让我答的这个我还真没看过 后续补上

7、上边没答让说了个nexttick的原理

之前写源码的时候写过了juejin.cn/post/728924…

8、git版本回滚
git reset --hard HEAD^版本号（不写就是上一版本 版本号通过git log查看）
git reset --soft HEAD\~n 回溯n个版本
这些命令都没用过 一般我们都是重新提交（想起来第一次工作提交代码 我还专门备份了一次原代码 就怕搞错）
9、js基础数据类型
  • Boolean
  • Null
  • Undefined
  • Number
  • BigInt （es6新增）
  • String
  • Symbol （es6新增）还问了关于symbol的东西 忘记了也没答上来
10、变量提升
    console.log(a) // undefined 
    var a = 10

这块还补充回答了暂时性死区

11、 peerDependencies

对等依赖，就是发布的npm包需要依赖什么包如 redux-react 强依赖react 他的package.json

peerDependencies: {
    "react": ">==16.9.0"
}
12、.npmrc文件
13、npm怎么限制node版本
13、package-lock.json

灵魂三问，这个只能说小满zs 永远的神，强烈怀疑面试官跟我一样看了满神的node教程 这里强烈推荐看下小满zs npm install的过程 这三问就第二个问题没答上来，简单说下，而且里边还有坑点
package.json

{ "engines" : { "node" : ">=0.10.3 <0.12", "npm" : "~1.0.20" } }

注意：当前项目想限制node版本 使用npm install的时候会有问题 限制不住 需要给.npmrc文件加上

engine-strict=true

使用yarn安装则不会有该问题 他会严格按照package.json配置来

14、vue传值问题
15、vue自定义指令
16、vue .sync修饰符

上述三问很基础 这里都有答案vue3js.cn/interview/v…

17、promise短路问题

这个没理解问啥，后来面试官问Promise.all中有一个报错怎么办，我答终止后续Promise，他说就是这个问题怎么解决，我说的是自己重写Promise.all，这个也很好实现

Promise.myAll = function(promises) {
  let i = 0;
  let result = []
  function pocessData(res, j, resolve) {
      result[j] = res
      i++
      if(promises.length === i) {
        resolve(result)
      }
  }

  return new Promise((resolve, reject) => {
    for (let j = 0; j < promises.length; j++) {
      promises[j]
        .then(res => {
          pocessData(res, j, resolve)
        })
        .catch(err => {
          pocessData(err, j, resolve )
        })
    }
  })
}

思路就是错误的也按顺序返回，添加到数组中，数据的过滤可以根据不同业务来，也没让我说思路，就直接过了也不知道是不是符合他的答案

18、单例模式和hooks模式区别

这个面试官问的很多vue的，我底下感觉应该是想引出vue2和vue3区别以及vue3优点，因为vue2可以理解为单例模式，vue3可以理解为hooks模式？优点其实能说很多，比如解耦，比如vue3的treeshaking。

19、语义化标签

答了几个知道的，具体可参考juejin.cn/post/684490…

avatar
文章
阅读
粉丝