本文共 2026 字，大约阅读时间需要 6 分钟。

目录

---

1.Vue生命周期：

当创建Vue实例的时候，看起来只是做了一步操作，实际上Vue内部有一系列的操作。在做这一系列事情的过程中，如果遇到了对应的函数，例如：created或mounted，会进行回调，告诉你已经执行到该步骤了。如果你想在这一步做一些操作，你就可以拿到并且执行这个回调函数。（使用生命周期函数去做一些自己想做的事情）

常用生命周期函数:组件创建时回调； 组件template挂在到DOM上时回调； 界面刷新时回调。

（1）代码示例

 

 

(2)生命周期官方图

 

 

2.懒加载，延迟加载，lazyLoad

      懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。

      在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时.

 

 

3.水平垂直居中(自己的HTML&&CSS里面有)

• 绝对定位&&margin：-1/2

.box1{  position: absolute;  left: 50%;  top: 50%;  margin-top: -100px;  margin-left: -100px;  width: 200px;   height: 200px;  /* background: #f40; */  border: solid 1px black;}/* box2为box1的子元素 */.box2{  position: absolute;  left: 50%;  top: 50%;  margin-top: -50px;  margin-left: -50px;  width: 100px;   height: 100px;  /* background: #f40; */  border: solid 1px black;}

• flex：特点：只需要在父级里面设计

  .box1 {  width: 200px;   height: 200px;  border: solid 1px black;  display: flex;  align-items: center;  /* 主轴对齐方式 */  justify-content: center;  /* 交叉轴对齐方式 */}.box2 {  width: 100px;   height: 100px;  border: solid 1px black;}

   

• transform:tranlate(-50%,-50%)：本质是absolute&&margin的变种

  .box1 {  position: relative;  width: 200px;   height: 200px;  border: solid 1px black;}.box2{  width: 100px;   height: 100px;  border: solid 1px black;  position: absolute;  left:50%;  top: 50%;  transform:translate(-50%,-50%)}

  更多方法：

 

4.箭头函数与普通函数的区别

    

ps:setTimeout()和setInterval(),会改变this指向: 

        在setTimeOut()或setInterval()这样的方法中，如果传入的函数包含this, 那么，默认情况下，函数中的this会指向window对象。这是由于setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致这些代码中包含的 this 关键字会指向 window (或全局)对象。

解决方法: 将当前this存储为一个变量,   使用bind()方法,   使用箭头函数

（1）语法简洁清晰

（2）不会创建自己的this，没有自己的this；其this继承自定义时候作用域链的上一层

（3）箭头函数永远会改变自己的this指向:call/apply/bind也无法改变箭头函数中的this指向

（4）箭头函数不能作为构造函数使用,因为他自己没有this

（5）箭头函数没有自己的实参列表(arguments),它所访问的arguments是外层环境中的

（6）箭头函数没有prototype

 

 

5.算法题：正则匹配

 

6.常用HTML标签和CSS选择器

 

7.常用CSS3属性:重点是flex

 

8.常用ES6

 

9.项目技术栈里面关于Vue详细的内容

 

10.跨域相关问题

（1）同源策略

（2）webpack配置proxy可以快速获取接口代理能力

（3）JSONP利用script标签没有跨域限制的特性，但是仅支持get方法：

（4）也可以浏览器直接设置开启跨域

（5）跨域为了限制不同源的请求，保证安全

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载地址：http://rwxzi.baihongyu.com/