每日一次面试题2022/5/7

• 平时遇到问题去哪里查阅资料
  • 菜鸟
  • B站
  • gethub
  • gitee
  • CSDN
  • QQ群/微信群        

1. 以element UI为例，说明怎样修改组件样式
   • 首先声明一个class类属性
   • 在Vue的style中加scoped区域
2. 样式权重计算
   • !Important>行内样式>ID选择器>类选择器>标签选择器>通配符>继承>浏览器默认属性
   • 其中行内为1000>ID为100>类为10>标签为1

div#app.child[name="appName"] /*a=1,b=2,c=1 —>权重 = 1 + 100 + 10 +10 = 121*/

1. 响应式布局
   1. 百分比布局
   2. 适用媒体查询（CSS3 @media查询）
   3. rem响应式布局
   4. vw响应式布局
   5. flex弹性布局
2. JS基础类型
   1. String
   2. Number
   3. Boolean
   4. Null
   5. Undefined
   6. Object
3. 怎么判断数据类型
   1. 适用typeof
   2. instanceof
   3. Object.prototype.toString.call
   4. constructor
4. 怎样理解JS异步任务
   1. 所谓的“异步”，简单说就是一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回来执行第二段。
5. 宏任务、微任务都包含哪些
   1. 宏任务：setTimeout,setInterval,Ajax,DOM事件
   2. 微任务：Promise async/await
   3. 微任务执行时机比宏任务要早
6. 页面滚动事件多久触发一次
7. 跨域
   1. 域名不同
   2. 端口不同
   3. 二级域名不同
8. 前端浏览器储存
   1. cookie

                cookie是客户端的解决方案，是一种网络服务器存储再计算机或移动设备上的纯文本文件，是服务器发送道浏览器上的一小块数据，是一个再服务器和客户端之间来回传送文本值的内置机制，服务器可以根据cookie追踪用户再不同页面的访问信息

cookie的用处：

• 会话管理：用户账号密码
• 个性化:用户偏好设置
• 追踪：记录和分析用户行为

cookie的特点：

• 大小限制再4k以内
• 不加密则不安全
• 会消耗网络的带宽
• 适用JS操作cookie比较复杂

session

session是一种服务端解决方案，是服务器为了保存用户状态而创建的一个特殊对象，客户端请求服务端，服务端会为请求开辟一块空间，session弥补了HTTP无状态特性

cookie，localStorage，sessionStorage的区别

• cookie可设置失效时间，默认为关闭浏览器后失效，sessionStorage仅在当前网页会话下有效，关闭页面或浏览器后就会被清除，localStorage除非手动清除，否则永久有效
• cookie存储数据大小在4K以内，sessionStorage和localStorage可以保存5M的信息
• 在进行请求时，cookie每次都会携带在请求头中，浪费带宽，如果cookie保存过多数据会产生性能问题，sessionStorage和localStorage仅在浏览器中保存，不参与和服务器的通信
• 从安全性来说，cookie安全性较低，所以一般不用来保存敏感信息，其他两个似乎也不安全。
• cookie区分域，不区分端口，同ip下的不同端口cookie是共享的，sessionStorage和localStorage不可共享
• 应用场景：
  • cookie可以用于识别用户登录
  • sessionStorage可用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数
  • localStorage可以用来传递在页面传递参数

1. v-if v-show区别
   1. v-show隐藏则是为该元素添加了display:none,dom元素依旧还在。v-if显示隐藏式将dom元素整个添加或删除

   2. show 由false变为true的时候不会触发组件的生命周期

      v-if由false变为true的时候，触发组件的beforeCreate、create、beforeMount、mounted钩子，由true变为false的时候触发组件的beforeDestory、destoryed方法

2. VUE路由模式
   1. hash模式
      1. 适用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载，其显示的网络路径中会有#号，有一点点丑。这是最安全的模式，因为他兼容所有的浏览器和服务器
   2. history模式
      1. 美化后的hash模式，会去掉路径中的 “#”。依赖于Html5 的history，pushState API,所以要担心IE9以及一下的版本，感觉不用担心。并且还包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作。

   3. abstract模式

3. hash模式与history模式区别
   1. hash模式比较丑，history模式比较优雅
   2. pushStae设置的新URL可以式与当前URL同源的任意URL;而hash智能修改#后面的部分，故只可设置与当前同文档的URL
   3. pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中
   4. pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串
   5. pushState可额外设置title属性供后续使用
   6. hash兼容IE8以上，history兼容IE10以上
   7. history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误
4. 对webpack的了解