20200331面试总结一

题目

1、H5C3新特性
2、es6新特性
3、flex布局
4、vue生命周期
5、简述vuex
6、vuex中action和mutation区别
7、vue父子组件传值
8、axios是什么，怎么用
9、简述vue反向代理
10、margin属性深层理解
11、let和var区别
12、不定宽高的元素垂直水平居中
13、简述闭包
14、vue的技术栈
15、作用域的理解

解析

1、H5

  1.语义化标签
      header、footer、aside、section、article、nav
  2.表单输入类型
      email、url、number、range、Date Pickers、search、color
  3.表单属性
      autocomplete、placeholder、form
  4.视频音频
      video、audio
  5.画布
      canvas
  6.伸缩矢量图
      svg
  7.拖拽属性
      draggable
  8.事件
      resize input
  9.地理定位
      Geolocation
  10.web存储
      sessionStorage 和 localStorage
  11.应用程序缓存 application cache
      创建 chche manifest 文件
  12.文件通讯协议
      websocket
  13.文件读取
      fileReader
  14.类名操作
      classlist

C3

   1.选择器
       :nth-child() :nth-of-type() :checked :disabled
   2.盒模型
       box-sizing
   3.背景
       background-image、background-size、background-origin
   4.渐变
       linear-gradient、radial-gradient
   5.边框
       border-radius、border-image
   6.阴影
       box-shadow、text-shadow
   7.2D/3D转换
       transform：translate rotate scale skew
   8.过渡
       transition
   9.动画
       keyframes、animation
   10.弹性盒子
       flex
   11.媒体查询
       @media

2、

var 和let 都是声明变量  let 更严格一点
     let  必须先有再使用
     let  遇见{} 就只能{}里面才能用 外面不能用  const 常量
      1 必须先有 再使用    2 必须赋值  
      3 定义一次再也不能改 4 {}里面只能{}里面用 外面不能用 	以后写代码 经常用let  偶尔用 const  var再也不要了 
解构赋值  let { 属性1,属性2.... }=person
    1  从person对象里面 拿出 对应的属性名字直接使用  想要就拿 
    2  : 重新取一个名字  取了之后原来的就名字就不行了
    3  从person对象拿出 name age gender 来用 并且给name取了新的名字username 	let { name : username,age,gender }=person; 
普通函数  function( 参数 ){  代码   }  
箭头函数最基本语法 (参数)=>{  代码   }    其他
     左侧() 只有一个参数 就可以省略不写  
   			 let add= x => {
   			       return x+20;
   			  }
     右侧{} 如果只有一句代码 可以省略不写 return 可以不写 		let add=  x =>  x+20 ;//相当于传来x 参数  return x+20
     左侧() 只有一个参数  右侧{}只有一句代码 那么都可以省略
   			 let add= x => x;

3、

      1：flex-direction属性决定主轴的方向（即项目的排列方向）。
       flex-direction: row | row-reverse | column | column-reverse;
       row（默认值）：主轴为水平方向，起点在左端。
       row-reverse：主轴为水平方向，起点在右端。
       column：主轴为垂直方向，起点在上沿。
       column-reverse：主轴为垂直方向，起点在下沿。
   
      2：flex-wrap属性定义，如果一条轴线排不下，如何换行。
       flex-wrap: nowrap | wrap | wrap-reverse;
       nowrap（默认）：不换行。
       wrap：换行，第一行在上方。
       wrap-reverse：换行，第一行在下方。
   
      3：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，
       默认值为row nowrap
      
      4：justify-content属性定义了项目在主轴上的对齐方式。
       justify-content: flex-start | flex-end | center | space-between |    space-around;
       flex-start（默认值）：左对齐
       flex-end：右对齐
       center： 居中
       space-between：两端对齐，项目之间的间隔都相等。
       space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
   
      5：align-items属性定义项目在交叉轴上如何对齐。
       align-items: flex-start | flex-end | center | baseline | stretch;
       如图1（来自：阮一峰）
       flex-start：交叉轴的起点对齐。
       flex-end：交叉轴的终点对齐。
       center：交叉轴的中点对齐。
       baseline: 项目的第一行文字的基线对齐。
       stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
   
      6：align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
       align-content: flex-start | flex-end | center | space-between |    space-around | stretch;
       flex-start：与交叉轴的起点对齐。
       flex-end：与交叉轴的终点对齐。
       center：与交叉轴的中点对齐。
       space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
       space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
       stretch（默认值）：轴线占满整个交叉轴。

4、

创建期间的生命周期函数：    
   beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和
methods 属性    
   created：实例已经在内存中创建OK，此时 data 和 methods
已经创建OK，此时还没有开始 编译模板    
   beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中   
   mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 
运行期间的生命周期函数：  
   beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点    
   updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！  
销毁期间的生命周期函数：       
   beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。  
   destroyed：Vue实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

5、

vuex是vue用来管理数据状态的一种机制，将vue中所有的状态抽离出来进行统一管理（单页面应用，购物车） 
state：基本数据；   
gettes：基本数据派生的数据， 
mutations：提交更改数据的方法，同步；   
actions：像一个装饰器，包裹mutations，使之可以异步 
modules：模块化Vuex

6、

流程顺序：相应视图->修改state，拆分成两部分，视图触发Action，Action再触发Mutation   
角色定位：基于流程顺序，二者扮演不同的角色 
Action：业务代码，异步请求   
Mutation：专注于修改State，理论上是修改State的唯一途径 
限制：角色不同，不同的限制   
Action：可以异步但不能直接操作State 
Mutation：必须同步执行

7、

父组件向子组件传递数据
实现方法：子组件中通过props自定义一个prop或者多个prop来接收父组件传递过来的数据，每个prop的名字和父组件绑定数据的命名必须一致：
子组件向父组件传递数据
实现方法：在子组件中通过$emit方法，传递数据给父组件，emit数据时，子组件传递数据的命名和父组件接收数据时的命名必须一致

8、

axios是一个基于promise的Http库。可以发送get，post请求，正由于Vue，React的出现，促使了axios轻量级库的出现
特性：
　　可以在浏览器中发送XMLHttpRequest请求
　　可以在node.js发送http请求
　　支持Promise API
　　拦截请求和响应
　　转换请求数据和响应数据
　　能够取消请求
　　自动转化JSON格式
　　客户端支持保护安全免受XSRF攻击
如何使用？
　　npm install axios 或者 引入
　　https://unpkg.com/axios@0.19.0/dist/axios.min.js
　　<script src=’http...min.js’></script>

9、使用webpack初始化的vue项目里有一个config文件夹,其中的index.js内有一个配置项 proxyTable 就是用来解决跨域的问题,配置的代码如下:

proxyTable: {
	      '/api/**': {
	          target: 'http://bl.7yue.pro/v1',   //表示你跨域请求的接口的域名
	          changeOrigin:true,	
	          pathRewrite:{
	              '^/api':'/'
	       }
      },

target设置的就是将要请求数据的域名,这个设置是包含在api这个对象之中的,因此在我们使用本地服务做代理的时候,在请求的接口url之前,也应该拼接上这个 /api:

axios.defaults.baseURL = "http://localhost:8080/api"     //重点在这个/api

    getLatest(){
      this.request.get('/classic/latest')
      .then(res=>{
        console.log(res);
      })
    }

/api 是必须带上的,此前已经说过,因为 proxyTable 中的配置都包含在 /api 之下,在设置baseurl的时候,不带上这个 /api ,代码就执行不到 proxyTable 底下的 api 里。

大概的原理就是请求首先发送到本地服务的api下去寻找数据的接口,但是本地服务不存在这个接口,刚好又做了转发,那么再去转发的目标域名下寻找对应的接口.从而实现由本地服务发送请求来解决跨域的问题.

10、

（1）水平方向的外边距合并
　　　　 两个水平方向的盒子相遇，那么最终两者之间的距离为左边盒子的右外边距和右边盒子的做外边距之和。
（2）竖直方向的外边距合并
　　     两个竖直方向的盒子相遇时，其竖直方向的距离等于上方盒子的下外边距和下方盒子的上外边距中较大的一个。
（3）假设有一个元素同时设置了margin-top和margin-bottom，但是内容为空，那么这两个margin值也会叠加，值为两者最大的一个，它类似与竖直方向上两个盒子margin值的叠加

11、

var是全局声明，let是块级作用的，只适用于当前代码块
var变量会发生变量提升，let则不会进行变量提升
var 会造成重复赋值，循环里的赋值可能会造成变量泄露至全局
let在一个块级作用只能赋一次值，并进行当前代码块的锁区，就是说当前块只有let声明的这个变量是有用的
let在一个块级内，只能声明一个一个相同的变量名

12、

1：思路：使用css3 flex布局
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
2：思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
3：思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中

13、

 1. 在一个函数里面 return 另一个函数 会形成闭包 可以访问其他函数内部变量
 2  自调用函数  也算形成闭包

14、

1.主要使用vue.js
2. 使用vue-cli脚手架搭建项目
3. 使用vue-router来做路由，实现单页面跳转
4. 使用iView UI作为前端UI框架，Mouse UI作为手机端UI框架
5. 使用axios来请求接口，实现前后端分离
6. 使用Echarts.js来实现图表效果
7. 使用qrcode.js来实现生成二维码
8. 使用html2canvas.js和canvas2image.js来实现下载二维码图片
9. 使用pdfh5.js + jQuery + pdf.js + pdf.worker.js实现手机端展示PDF
10.使用ES6语法来开发项目
11.使用webpack来自动构建项目

15、

1、变量作用域
在JavaScript中全局变量的作用域比较简单，它的作用域是全局的，在代码的任何地方都是有定义的。然而函数的参数和局部变量只在函数体内有定义。另外局部变量的优先级要高于同名的全局变量,也就是说当局部变量与全局变量重名时，局部变量会覆盖全局变量。

2、函数作用域
在JavaScript中变量的作用域，并非和C、Java等编程语言似得，在变量声明的代码段之外是不可见的，我们通常称为块级作用域，然而在JavaScript中使用的是函数作用域（变量在声明它们的函数体以及这个函数体嵌套的任意函数体都是有定义的）。

3、作用域链
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。
当一个函数创建后，它实际上保存一个作用域链，并且作用域链会被创建此函数的作用域中可访问的数据对象填充。