前端找工作日志

大家好，自我介绍一下，biubiu是名大专生，大三实习的时候去打校企合作的培训机构学了一年的前端，掌握的技术有html、css、javaScript、juqery基础、vue2、vue3、小程序，最近面一直没有面上非常苦恼，在这里想跟大家分享一下自己整理的一些面试题

【在浏览器地址栏输入url会发生什么】
浏览器会根据请求的url交给DNS域名解析，找到真实的IP，向服务器发起请求
服务器交给后台处理完之后返回数据，浏览器接收文件
浏览器对加载到的文件资源进行语法解析，建立相应的内部数据结构
载入解析到的资源文件，渲染页面
 

【什么是闭包，为什么要用它】
闭包是指有权访问另一个函数作用域中变量的函数，最常见的闭包是函数嵌套函数，内部函数可以访问外部函数的变量
闭包的两个特点：1.私有变量；2.使已经运行结束的函数上下文中的变量对象继续留在内存中，但是这个特点容易造成内存泄漏，所有要注意清空内存

【get请求和post请求的区别】

百度上找到的回答是get请求用于获取数据，post请求用于向服务器推送数据，以下是我在面试题文档自己整理的：
1.浏览器回退的时候get不会重新请求，post会
2.get请求会被浏览器主动缓存，post不会
3.get请求的参数会保留在浏览器历史记录里面，post不会。为了防止CSRF攻击建议使用post
4.get请求在url中传递的参数有大小限制(不同浏览器限制不同，基本是2kb)，而post没有
5.get的参数是直接暴露在url上的，相对不安全。post的请求参数是在请求体中的

【es6】
let、const、symbol、模板字符串、数组\对象解构、对象简写、箭头函数、柯里化函数、延展运算符、Set对象、Map对象、proxy、promise、class

•    const：声明常量，常量是指不允许修改的储存器
•    symbol：调用symbol函数会返回一个唯一的ID
•    柯里化函数：把接收多个参数的函数变成接收单一参数的函数，提高参数的重复使用
•    延展运算符：展开数组，可以快速复制数组的数组，可以用来做深拷贝但是如果多层数组就不行，但是只能深拷贝第一层并不完美
•    Set对象：针对数组管理的对象，一般用来数组去重，特点是集合中的数据是唯一的
•    Map对象：针对对象的数据管理，使用Map对象管理数据时，key可以是任意类型
•    proxy：对象代理，proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截。和es5的Object.defineProperty类似,区别是Object.defineProperty是直接操作对象的属性，proxy代理的是整个对象，要比defineProperty的性能要好，vue3中用proxy代替了defineProperty
•    promise:promise本身并没有提供任何代码逻辑，它可以帮我们改造和优化传统的使用回调函数的异步操作，promise可以解决传统的回调地狱，有三种状态；初始状态，成功返回的状态，失败返回的状态，还有一个then方法
•    class: class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

【为什么使用vue而不是jquery】
jquery是通过js操作dom而vue使用的是虚拟dom，所以vue的性能要比jquery好
jquery没有对业务进行封装，没有解决业务的问题，很杂乱。vue通过脚手架可以很好的整理项目文件，解决了业务分层的问题
jquery版本更新比较快，版本之间不能向下兼容；在大型项目中不具备代码模块管理的功能。插件之间兼容性比较差会有冲突

【MVVM】
View：界面
Model：数据模型
ViewModel：作为桥梁负责沟通 View 和 Model
在 MVVM 中，UI 是通过数据驱动的，数据一旦改变就会相应的刷新对应的 UI，UI 如果改变，也会改变对应的数据。这种方式就可以在业务处理中只关心数据的流转，而无需直接和页面打交道。ViewModel 只关心数据和业务的处理，不关心 View 如何处理数据，在这种情况下，View 和 Model 都可以独立出来，任何一方改变了也不一定需要改变另一方，并且可以将一些可复用的逻辑放在一个 ViewModel 中，让多个 View 复用这个 ViewModel

【vue常用的修饰符】
stop    阻止事件继续传播
prevent    阻止标签默认行为
capture    使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
self    只当在event.target是当前元素自身时触发处理函数
once    事件将只会触发一次
passive    不阻止事件的默认行为

【key的作用】
v-if和v-for中会使用到key
v-if中使用key：    在进行切换时，vue为了提高效率会前后比较，如果切换前后都存在的元素就直接复用，此时如果在input框中写入一些数据，切换后内容会保留
v-for中使用key:    v-for渲染列表数据时，数据量会很庞大，因为经常要对一些数据进行修改。整个列表都会重新渲染，使用key添加唯一标识，用key判断某一个值是否修改，如果修改数据则单独渲染这一项

【vue2的生命周期】
创建：    beforeCreate    最早可以获取this的状态
         created        最早获取data的状态
挂载：    beforeMount
       mounted        最早获取dom节点的状态
更新：    beforeUpdate
       updated
销毁：    beforeDestroy
       destroyed    一般用来取消定时器
缓存组件：activited        组件激活时调用
    deadctivated    组件销毁时调用
报错：    errorCaptured    当后代组件报错时被调用

【vue-router 有三种模式】
hash：使用url的hash来模拟一个完整的url,当url改变时页面不会重新加载，显示的网页路径会有#号，这是最安全的模式
history:会去掉#号，依赖html5的history、pushState API,包括back、forward、go三个方法，对应浏览器左上角的前进、后退等按钮的操作
abstract：该模式用于不支持浏览器API的环境中，充当fallback,在浏览器页面中嵌套其他页面时使用(iframe)