前端面试题（1）

1.JavaScript严格模式与非严格模式区别

JavaScript 严格模式（strict mode）即在严格的条件下运行。
严格模式通过在脚本或函数的头部添加 use strict 表达式来声明。
区别如下：
（1） 严格模式下,不允许使用with。
（2）delete运算符后跟随非法标识符(即delete 不存在的标识符)，会抛出语法错误； 非严格模式下，会静默失败并返回false。
（3）严格模式中，对象直接量中定义同名属性会抛出语法错误； 非严格模式不会报错。
（4）严格模式中，函数形参存在同名的，抛出错误； 非严格模式不会。
（5）严格模式不允许八进制整数直接量（如：023。
（6）严格模式中，arguments对象是传入函数内实参列表的静态副本；非严格模式下，arguments对象里的元素和对应的实参是指向同一个值的引用。
（7）严格模式中 eval和arguments当做关键字，它们不能被赋值和用作变量声明。
（8）严格模式会限制对调用栈的检测能力，访问arguments.callee.caller会抛出异常。
（9）严格模式 变量必须先声明，直接给变量赋值，不会隐式创建全局变量。
（10）严格模式中 call apply传入null undefined保持原样不被转换为window。

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode

2.如何清除浮动

（1） 在子级元素后添加一个空元素，为其添加clear:both。 弊端：增加了无意义的元素结构。（不推荐使用）

（2）给父级元素设置一个overflow:hiddden。弊端：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。（不推荐使用）

（3）使用after伪元素清除浮动。弊端：IE6-7不支持伪元素：after。（推荐使用）

.layout:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }

3.PC端和移动端区别

（1）界面布局。PC端和移动端的屏幕尺寸不同，导致显示的内容也会有所差异。移动端屏幕相对窄小，一般是单列显示，最多也只能是双列+响应式，但是PC端的屏幕大，布局可以更加灵活。

（2）使用习惯。移动端的操作尺度比较大，单击误差大，所以按钮、链接等元素比较设计的大一些。而PC端的操作尺度比较小，用鼠标单击是一件比较准确的事情，所以在设计按钮或者链接等样式时可以稍微小一些。比如说淘宝网页的PC版和手机版。在PC版的淘宝页面中，有些小按钮能放下的功能，在移动版就必须另弹窗口让用户详细输入。

（3）网络速度。手机的网络一般是2G\3G\4G\WIFI等，网页的加载速度会影响用户的体验，需要消耗用户的流量，所以要少用图片、动画、JS等，而PC的网络一般是连接宽带或者WIFI，PC端的用户一般不会考虑页面消耗的流量，所以一般不用考虑加载问题。

(4)技术层面。移动端开发有一些jquery for mobile一类的库是专用，不适用于PC端。当然，反过来有些PC端的工具或者技术在移动端也不好用。PC应用更关注的是后台、大数据、算法类的，而移动端更关注的是如何更好地交互和体验。

4.position属性有哪些

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，sticky是CSS3新发布的一个属性。
（1）position: static（静态定位）
  static是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。

（2）position: relative(相对定位)
  是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

（3）position: absolute(绝对定位)
  是指给元素设置绝对的定位，元素会脱离文档流，绝对定位的元素是不区分块级元素/行内元素/行内块级元素。
  ①设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
  ② 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

（4）position: fixed（固定定位）
  可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的，固定定位的元素是脱离标准流的, 不区分行内/块级/行内块级元素。

（5）position: inherit
  继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

（6）position: sticky（粘滞定位）
  结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
  使用条件：
  父元素不能overflow:hidden或者overflow:auto属性。
  必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。
  父元素的高度不能低于sticky元素的高度 。
  sticky元素仅在其父元素内生效。

5.事件冒泡，如何阻止事件冒泡

（1）事件冒泡：在一个对象上触发某类事件，这个事件会向这个对象的的父级传播，从里到外，直至它被处理或者到达了对象层次的最顶层，即document对象。这个过程就是JavaScript的事件冒泡。
（2）阻止事件冒泡：
  ①直接在对应方法中使用**event.stopPropagation()**便可阻止事件冒泡。
  ②vue.js中提供事件修饰符：.stop 阻止事件冒泡

6.Vue2和vue3区别

（1）默认进行懒观察（lazy observation）。
  在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。

（2）更精准的变更通知。
  比例来说：2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

（3）3.0 新加入了 TypeScript 以及 PWA 的支持

（4）部分命令发生了变化：
  下载安装 npm install -g vue@cli
  删除了vue list
  创建项目 vue create
  启动项目 npm run serve

（5）默认项目目录结构也发生了变化：
  移除了配置文件目录，config 和 build 文件夹
  移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
  在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

  参考链接：https://m.php.cn/vuejs/464077.html

7.Vue打包

  需要在项目目录下执行npm run build命令，对象目进行打包，打包生成dist文件夹。

8.Vue组件之间如何传值

（1）父组件向子组件传递数据：在 Vue 中，可以使用 props 向子组件传递数据。
（2）子组件向父组件传递数据：通过一个$emit自定义一个事件，并传递数据；

子组件
this.$emit('myEvent')

父组件
<my-component v-on:myEvent="doSomething"></my-component>

9.v-if、v-show有什么区别

（1）v-if v-else 通过控制dom节点的渲染，实现显示与隐藏。
（2） v-show 通过控制dom节点css样式中display，来实现显示与隐藏。
（3）频繁的显示与隐藏某个组件时，用v-show较好。
（4）v-if会频繁渲染dom树，占用资源，影响代码运行效率。

10.Ajax跨域问题

  跨域问题来源于JavaScript的同源策略，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题，比如a标签、script标签、甚至form标签（可以直接跨域发送数据并接收数据）等
  解决方案：参考链接：https://blog.csdn.net/itcats_cn/article/details/82318092