【面试必问】如果只会用而不会回答技术点的话，come on

目录

1、谈谈 This 对象的理解。

2、什么是闭包，为什么要用它？

3、浅谈Vue双向数据绑定的原理

4、什么是MVC?

5、如何理解MVVM原理？

6、Vue为什么要异步渲染？

7.Vue中的钩子函数: 

8、Ajax请求放在哪个钩子函数中？

9.请求方法

1.说明

2.GET和POST区别

10.http状态码附录

状态码1xx

状态码2xx:成功

状态码3xx:重定向

状态码4xx:客户端错误

状态码5** 服务端错误

---

1、谈谈 This 对象的理解。

this 是执行上下文中的一个属性，它指向最后一次调用这个方法的对象。在实际开发中，this 的指向可以通过四种调用模式来判断。

第一种是函数调用模式，当一个函数不是一个对象的属性时，直接作为函数来调用时，this 指向全局对象。

第二种是方法调用模式，如果一个函数作为一个对象的方法来调用时，this 指向这个对象。

第三种是构造器调用模式，如果一个函数用 new 调用时，函数执行前会新创建一个对象，this 指向这个新创建的对象。

第四种是 apply 、 call 和 bind 调用模式，这三个方法都可以显示的指定调用函数的 this 指向。

其中 apply 方法接收两个参数：一个是 this 绑定的对象，一个是参数数组。call 方法接收的参数，第一个是 this 绑定的对象，后面的其余参数是传入函数执行的参数。

也就是说，在使用 call() 方法时，传递给函数的参数必须逐个列举出来。bind 方法通过传入一个对象，返回一个 this 绑定了传入对象的新函数。这个函数的 this 指向除了使用 new 时会被改变，其他情况下都不会改变。

这四种方式，使用构造器调用模式的优先级最高，然后是 apply 、 call 和 bind 调用模式，然后是方法调用模式，然后是函数调用模式。

2、什么是闭包，为什么要用它？

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以访问到当前函数的局部变量。

闭包有两个常用的用途。

闭包的第一个用途是使我们在函数外部能够访问到函数内部的变量。通过使用闭包，我们可以通过在外部调用闭包函数，从而在外部访问到函数内部的变量，可以使用这种方法来创建私有变量。

函数的另一个用途是使已经运行结束的函数上下文中的变量对象继续留在内存中，因为闭包函数保留了这个变量对象的引用，所以这个变量对象不会被回收。

其实闭包的本质就是作用域链的一个特殊的应用，只要了解了作用域链的创建过程，就能够理解闭包的实现原理。

3、浅谈Vue双向数据绑定的原理

所谓双向数据绑定, 无非就是数据层和视图层中的数据同步, 在写入数据时视图层实时的跟着更新!

• 大佬们是这么描述的:

实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()【Dep】来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者

个人理解就是getter函数里面执行的任务就是watcher订阅者, 而setter函数执行的任务就是发布者 

ECMAScript中有两种属性: 数据属性和访问器属性, 数据属性一般用于存储数据数值, 访问器属性对应的是set/get操作, 不能直接存储数据值

• 简单点的方式

如上图所示，我们可以看到，整体实现分为四步：

1、实现一个Compile，对指令进行解析，初始化视图，并且订阅数据的变更，绑定好更新函数

2、实现一个Observer，对数据进行劫持，通知数据的变化

3、实现一个Watcher，将其作为以上两者的一个中介点，在接收数据变更的同时，让Dep添加当前Watcher，并及时通知视图进行update。

4、实现MVVM，整合以上三者，作为一个入口函数

• 流程解读：

第一步：创建MVVM、Compile类，并且利用createDocumentFragment将<div id="app"></div>下的标签放到JS文档碎片中去。

第二步：对 标签 进行编译，将带有 v- 指令的标签和{{ }}的标签解析出来

第三步：创建Observer类进行数据劫持、深度递归劫持，当data中设置值或者修改值的时候，利用Object.defineProperty对值进行监控。

第四步：创建Watch类观察者，用新值和老值进行比对，如果发生变化，就调用更新方法，进行视图更新。

第五步：将输入框v-model和视图绑定起来，输入框的值变化，同时页面中通过{{}}绑定的值也变化，实现双向数据绑定。

4、什么是MVC?

Model（模型）、View（视图）、 Controller（控制器）相互依赖关系的三部分组成模型。

Model在MVC中实际是数据模型的概念，可以把它当成从数据库里查出来后的一条数据，或者是将查询出来的元数据经过裁剪或者处理后的一个特定数据模型结构。

View是视图，是将数据内容呈现给用户肉眼的界面层，View层最终会将数据模型下的信息，渲染显示成人类能易于识别感知的部分。

Controller是数据模型与View之间的桥梁层，实际界面层的各种变化都要经过它来控制，而且像用户从界面提交的数据也会经过Controller的组装检查生成数据模型，然后改变数据库里的数据内容。 

5、如何理解MVVM原理？

MVVM是一种软件架构模式，

在Model和View之间多了叫做View-Model的一层，将模型与视图做了一层绑定关系，在理想情况下，数据模型返回什么试图就应该展示什么

6、Vue为什么要异步渲染？

• 我们可以从用户和性能两个角度来探讨这个问题。

从用户体验角度，实际上我们的页面只需要展示第二次的值变化，第一次只是一个中间值，如果渲染后给用户展示，页面会有闪烁效果，反而会造成不好的用户体验。

从性能角度，最终需要展示的数据其实就是第二次给val赋的值，如果第一次赋值也需要页面渲染则意味着在第二次最终的结果渲染之前页面还需要渲染一次无用的渲染，无疑增加了性能的消耗。

对于浏览器来说，在数据变化下，无论是引起的重绘渲染还是重排渲染，都有可能会在性能消耗之下造成低效的页面性能，甚至造成加载卡顿问题。

异步渲染和熟悉的节流函数最终目的是一致的，将多次数据变化所引起的响应变化收集后合并成一次页面渲染，从而更合理的利用机器资源，提升性能与用户体验。

• 同步和异步本身是相对的

同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。

异步就是，当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情。

异步虽然好 但是有些问题是要用同步用来解决，比如有些东西需要的是拿到返回的数据在进行操作的。这些是异步所无法解决的。

在我们的开发代码里，只需要加入下一句即可让你的页面渲染同步进行。

import Vue from 'Vue'
Vue.config.async = false

• 实际：

//先执行
this.$nextTick(() => {
//执行完以上再执行此操作
})

7.Vue中的钩子函数: 

1. 'beforeCreate',        data还没有被初始化，DOM也没有初始化

2. 'created',                 数据模型下的val已经完成了初始化工作，但是页面DOM依旧不能获取到;;;可以发起异步请求进行数据模型的赋值操作，但是不能做页面DOM的操作

3. 'beforeMount',         beforeMount与created之间只有一个是否是浏览器的判断，所以这时候在钩子函数中的里数据模型里、页面的状态，与created是一样的

4. 'mounted',               数据模型和页面的DOM都初始化完成，在这里我们可以给数据模型赋值也可以进行DOM操作  =>  axios请求  

5. 'beforeUpdate',

6. 'updated',

7. 'beforeDestroy',     未被注销

8. 'destroyed',            被注销

9. 'activated',             在 2.2.0 及其更高版本中，activated钩子函数和deactivated钩子函数被引用进来，因为这两个钩子函数只会是被keep-alive标签包裹的子组件才会得到触发机会，所以很少被人注意到

10. 'deactivated',

11. 'errorCaptured',

12. 'serverPrefetch'

注意：

首先，一个组件的 created 比 mounted 也早调用不了几微秒，性能没啥提高；
而且，等到异步渲染开启的时候，created 就可能被中途打断，中断之后渲染又要重做一遍，想一想，在 created 中做ajax调用，代码里看到只有调用一次，但是实际上可能调用 N 多次，这明显不合适。
相反，若把ajax 放在 mounted，因为 mounted 在第二阶段，所以绝对不会多次重复调用，这才是ajax合适的位置.

8、Ajax请求放在哪个钩子函数中？

如果放在beforeCreate函数里，这时候data还没有初始化，无法将获取到的数据赋值给数据模型。

如果放在mounted里，这时候页面结构已经完成，如果获取的数据与页面结构无联系的话，这个阶段是略微有点迟的。

一般在，created，mounted 中都可以发送数据请求，但是，大部分时候，会在created发送请求。

Created的使用场景：如果页面首次渲染的就来自后端数据。因为，此时data已经挂载到vue实例了。Ajax请求应该放在created钩子函数是最好的，这时候数据模型data已经初始化好了。

在 created（如果希望首次选的数据来自于后端，就在此处发请求）（只发了异步请求，渲染是在后端响应之后才进行的）、beforeMount、mounted（在mounted中发请求会进行二次渲染） 这三个钩子函数中进行调用。

因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是最常用的是在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求。

但是！

（1）mounted

　　如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,一般上我写的话,接口不复杂会放created里面,接口多复杂的话会放在mounted里面.

（2）mounted

　　created 是加载DOM,html之后 就马上执行, 比如初始化,获取屏幕高度调整,赋值等等,而mounted就是执行包括js之后,准备开始调用方法,也就是说 类似传统开发那样,先加载jquery 再调用插件

好处：

第一点：能更快获取到服务端数据，减少页面 loading 时间；

第二点：放在 created 中有助于一致性，因为ssr 不支持 beforeMount 、mounted 钩子函数。

9.请求方法

1.说明

1 GET 请求指定的页面信息，并返回实体主体。
2 HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
3 POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。
4 PUT 从客户端向服务器传送的数据取代指定的文档的内容。
5 DELETE 请求服务器删除指定的页面。
6 CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
7 OPTIONS 允许客户端查看服务器的性能。
8 TRACE 回显服务器收到的请求，主要用于测试或诊断。

2.GET和POST区别

http协议最常见的两种方法GET和POST，这几点答案其实有几点并不准确

请求缓存：GET 会被缓存，而post不会

收藏书签：GET可以，而POST不能

保留浏览器历史记录：GET可以，而POST不能

用处：get常用于取回数据，post用于提交数据

安全性：post比get安全

请求参数：querystring 是url的一部分get、post都可以带上。 get的querystring（仅支持urlencode编码），post的参数是放在body（支持多种编码）

请求参数长度限制：get请求长度最多1024kb，post对请求数据没有限制

10.http状态码附录

状态码1xx

100 Continue：
服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols：
服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。
102: 由WebDAV（RFC 2518）：
扩展的状态码，代表处理将被继续执行

状态码2xx:成功

200 OK：
请求成功（其后是对GET和POST请求的应答文档。）
201 Created：
请求被创建完成，同时新的资源被创建。
202 Accepted：
供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information：
文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content：
没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content：
没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content：
客户发送了一个带有Range头的GET请求，服务器完成了它。

状态码3xx:重定向

300 Multiple Choices：
多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently：
所请求的页面已经转移至新的url
302 Found：
所请求的页面已经临时转移至新的url。
303 See Other：
所请求的页面可在别的url下被找到。
304 Not Modified：
未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy：
客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused：
此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect：
被请求的页面已经临时移至新的url。

状态码4xx:客户端错误

400 Bad Request：
服务器未能理解请求。
401 Unauthorized：
被请求的页面需要用户名和密码。
401.1：
登录失败。
401.2：
服务器配置导致登录失败。
401.3：
由于 ACL 对资源的限制而未获得授权。
401.4：
筛选器授权失败。
401.5：
ISAPI/CGI 应用程序授权失败。
401.7：
访问被 Web 服务器上的 URL 授权策略拒绝。这个错误代码为 IIS 6.0 所专用。
402 Payment Required：
此代码尚无法使用。
403 Forbidden：
对被请求页面的访问被禁止。
404 Not Found:
服务器无法找到被请求的页面。
405 Method Not Allowed:
请求中指定的方法不被允许。
406 Not Acceptable:
服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required:
用户必须首先使用代理服务器进行验证，这样请求才会被处理。
408 Request Timeout:
请求超出了服务器的等待时间。
409 Conflict:
由于冲突，请求无法被完成。
410 Gone:
被请求的页面不可用。
411 Length Required:
“Content-Length” 未被定义。如果无此内容，服务器不会接受请求。
412 Precondition Failed:
请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large:
由于所请求的实体的太大，服务器不会接受请求。
414 Request-url Too Long:
由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
415 Unsupported Media Type:
由于媒介类型不被支持，服务器不会接受请求。
416 Requested Range Not Satisfiable:
服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed:
执行失败。
423:
锁定的错误。

状态码5** 服务端错误

500 Internal Server Error：
请求未完成。服务器遇到不可预知的情况。
501 Not Implemented：
请求未完成。服务器不支持所请求的功能。
502 Bad Gateway：
请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable：
请求未完成。服务器临时过载或宕机。
504 Gateway Timeout：
网关超时。
505 HTTP Version Not Supported：
服务器不支持请求中指明的HTTP协议版本。