初---程序猿面试题{浏览器输入url到页面呈现出来发生什么,stop 阻止事件继续传播,hash和history,promise什么时候用到.catch,set和map的区别,组件传参}

1.浏览器输入url到页面呈现出来发生什么？

输入url地址
应用层进行DNS解析
应用层生成HTTP请求报文
传输层建立TCP连接
浏览器构建HTTP Request请求
数据链路层实现网络相邻节点间可靠的数据通信
物理层传输数据
服务器处理反向传输
服务器返回一个 HTTP 响应

2.stop 阻止事件继续传播

.prevent 阻止标签默认行为

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

3.hash和history

在最明显的显示上：hash模式的URL中会夹杂着#号，而history没有。

Vue底层对它们的实现方式不同:
—hash模式是依靠onhashchange事件(监听location.hash的改变)
—history模式是主要是依靠pushState() replaceState()

—pushState()：可以创建新的历史记录
—replaceState()：只能修改当前历史记录

当真正需要通过URL向后端发送HTTP请求的时候，比如我们前端请求的url更改造成页面刷新时 在history模式下如果前端请求的url跟后端不匹配时会产生一个错误

4.promise什么时候用到.catch

Promise.catch()错误捕获机制的理解:

—.catch方法在内部也是调用的Promise.prototype.then方法中的reject状态下的方法，也就是calling
—obj.catch(onRejected)内部calls obj.then(undefined, onRejected)；
它返回了一个失败的promise，
以及返回一个参数作为一个失败理由。
值得注意的是这里返回的是一个已定型的promise，这个过程是promise从pending到reject的改变过程。

5.promise是同步和异步

Promise本身是同步的，他的then方法和catch方法是异步的
同步和异步的区别？
同步交互：指发送一个请求,需要等待返回,然后才能够发送下一个请求，有个等待过程；
异步交互：指发送一个请求,不需要等待返回,随时可以再发送下一个请求，即不需要等待。
区别：一个需要等待，一个不需要等待，在部分情况下，我们的项目开发中都会优先选择不需要等待的异步交互方式。

6.set和map的区别

map中的元素是key-value（键值对）对：关键字起到索引的作用，值则表示与索引相关联的数据；Set与之相对就是关键字的简单集合，set中每个元素只包含一个关键字。

set的迭代器是const的，不允许修改元素的值；
map允许修改value，但不允许修改key。

其原因是因为map和set是根据关键字排序来保证其有序性的，如果允许修改key的话，那么首先需要删除该键，然后调节平衡，再插入修改后的键值，调节平衡，如此一来，严重破坏了map和set的结构，导致iterator失效，不知道应该指向改变前的位置，还是指向改变后的位置。所以STL中将set的迭代器设置成const，不允许修改迭代器的值；而map的迭代器则不允许修改key值，允许修改value值。
map支持下标操作，set不支持下标操作。
map可以用key做下标，map的下标运算符[ ]将关键码作为下标去执行查找，如果关键码不存在，则插入一个具有该关键码和mapped_type类型默认值的元素至map中，因此下标运算符[ ]在map应用中需要慎用，const_map不能用，只希望确定某一个关键值是否存在而不希望插入元素时也不应该使用，mapped_type类型没有默认值也不应该使用。如果find能解决需要，尽可能用find。

7.组件传参

1.父子通信：父组件使用props组件传递数据，子组件通过事件向父组件发送消息使用v-on绑定自定义事件
2.子组件给父组件传递值：通过子组件内 $ emit触发自定义事件，子组件使用时v-on绑定自定义事件
3.任意组件之间通信 $ emit.$on:eventBus就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时合适
4.vuex

小作者在持续更新中…