前端面试散记

keepalive

　　　　 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

$router 和$route 区别

• $router是VueRouter的实例对象，有push、replace等方法；
• $route是路由信息对象、获取页面传递的参数，path、params、hash、query等路由信息参数；

vue常用修饰符

• prevent 阻止事件默认行为 =event.preventDefault()
• stop 阻止事件冒泡 = event.stopPropagation()
• self 事件仅作用于元素本身，子组件不会触发
• capture 事件侦听，事件捕获

vue computed 和 watch 的区别 使用场景

computed:

• 有缓存机制、依赖项发生改变重新计算。
• 不支持异步，当computed 内部有异步操作时、无法监听数据变化
• 不需要在data里声明
• 一个属性受多个属性影响时使用 使用 场景：购物车结算

watch:

• 没有缓存机制，数据发生变化直接触发
• 支持异步操作
• 必须在data里声明
• 数据变化时执行异步或开销较大的操作（一条数据影响多条数据的时候） 使用场景：搜索、滚动锚点定位

HTTP 状态码及含义

1. 200 OK ，表明请求已经成功. 默认情况下状态码为200的响应可以被缓存。

2. 302 Found,临时重定向。重定向状态码表明请求的资源被暂时的移动到了由 Location 头部指定的 URL 上。浏览器会重定向到这个URL，但是搜索引擎不会对该资源的链接进行更新。

3. 400 Bad Request，表示由于语法无效，服务器无法理解该请求。客户端不应该在未经修改的情况下重复此请求。

4. 403 Forbidden，指的是服务器端有能力处理该请求，但是拒绝授权访问。进入该状态后，不能再继续进行验证。该访问是永久禁止的，并且与应用逻辑密切相关（例如不正确的密码）

5. 404 Not Found，说明服务器端无法找到所请求的资源。404 不能说明请求的资源是临时还是永久丢失。如果服务器知道该资源是永久丢失，那么应该返回 410 (Gone) 而不是 404 。

6. 500 Internal Server Error，表示所请求的服务器遇到意外的情况并阻止其执行请求。

7. 502 Bad Gateway，表示作为网关或代理角色的服务器，从上游服务器（如tomcat、php-fpm）中接收到的响应是无效的。服务器挂掉了的意思。

8. 503 Serveice Unavailable，表示服务器尚未处于可以接受请求的状态。 juejin.cn/post/684490…

小程序登录原理：

1.首先在小程序端通过调用 wx.login 和使用 button 组件，并将 open-type 指定为 getUserInfo 类型,getUserInfo 获取code 和 用户信息，一起通过 wx.request 发送给开发者服务器端，这样便减少一些请求。

2.调用 jscode2session 接口到微信接口服务获取 session_key 和 openId，直接对用户信息进行 SHA1 校验，校验成功以后创建自定义登录态，返回自定义登录态到小程序。

3.自定义登录态是什么呢？做过web的朋友都知道 session 和 cookies 可以组合做登录态，我们这里也是模拟这种设计，只是我们会把session存到数据库中， 自定义生成 cookies(token) 传递给小程序端，存储到 storage 里面。

4.storage 类似于浏览器的 localStorage，用户小程序端方便的存储一些基础数据。

---

3.React的生命周期，说说你知道的生命周期函数。

4.如何验证用户登录，第三方登录（微信登录）的原理是什么。

因为我有提到在项目里做了用户登录和第三方登录，所以面试官问得很细。

5.cookie是什么？cookie的字段有哪些？

6.浏览器缓存知道哪些？Local storage和cookie的区别是什么？

7.Local storage、session storage有什么区别？

8.在项目里如何运用cookie处理用户信息的？

9.有涉及到web安全方面吗？说说常见的攻击方式？XSS和CSRF，解决方案

10.跨域问题及解决方案？JSONP、CORS代理

11.说说你知道的http状态码

12.js异步加载的方式有哪些？

13.webpack用过吗？简单说一说

14.从输入URL到浏览器显示页面经过了什么？

15.浏览器缓存机制，强缓存、协商缓存？

16.vue和react的区别都有什么？

17.与ES5相比，React的ES6语法有何不同？

18.什么情况会引起组建重渲染？

19.setState()函数是同步的还是异步的？

20.介绍一下React Redux的工作流程。

21.解释Reducer的作用。

22.项目中有用到react路由吗？简单说一下。

23.情景题：目前需要实现一个组件，它会根据父组件提供的参数自动生成多个表单，如何实现？传参设计，内部生成form如何设计，如何保证每个表单是独立的...

24.讲一下你知道的前端性能优化方式。

25.说说js操作数组的API

26.ts和js的区别？

27.useEffect()怎么使用？

28.useEffect()怎么使用？

---

微信路由以及他们之间的区别：

wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。 wx.reLaunch(Object object)关闭所有页面，打开到应用内的某个页面。 wx.redirectTo(Object object)关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 wx.navigateBack(Object object)关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

1. vue2的响应原理和vue3的响应原理有什么区别？

• vue2.x用的核心函数是Object.defineProperty，只能监听一个属性，所以要想监听一个对象，需要用到for in 处理；
• vue3.0用proxy写,proxy可以监听整个对象。省去for in提升效率，并且可以监听数组，不用再去单独的对数组做特异性操作。

2. vue关于proxy 和 object.defineProperty的区别？

• proxy可以直接监听对象和数组的变化，
  

• Proxy返回的是⼀个新对象,可以只操作新的对象达到想要的⽬的,⽽ Object.defineProperty 只能遍历对象属性直接修改。
  

• Proxy作为新标准将受到浏览器⼚商重点持续的性能优化
  

3. 新发布的vue3.0有什么特性 vue3.0用proxy写,proxy可以监听整个对象和数组的变化，同时proxy又受到浏览器厂商的持续性能优化。
4. 手写instanceof

 function InstanceOf(son,farther){
    while(true){
        son=son.__proto__
        if(!son) return false
        if(son===farther.prototype) return true
    }
 }