前端面试题八股文汇总（最新）

前言：小伙伴们，本篇文章是博主自己在面试过程中的一些面试题的记录，自己在总结回顾记录的同时希望也能帮助到你们，可以结合对应的知识点去理解和查看！有什么不对的地方欢迎伙伴们指正！大家一起学习
小提示重要！：简历上的内容（项目+技能）自己一定要准备好，防止被问起。

一 、

1.开发中遇到的困难？

• 问题：才开始做项目的时候，以为插件使用简单，vue项目中轮播图的使用，swiper插件的使用，查看官方的文档是一定要有节点DOM（相应的结构）渲染出来才会有对应的动态效果。
  vue中mounted生命周期函数–>组件挂载完毕就会调用，HTML已经被渲染到了页面上，这个阶段可以执行dom操作，可以进行数据请求，但是还是v-for在遍历来自于Vuex（数据:通过ajax向服务器发请求，存在异步）并且v-for的遍历也是需要时间的遍历数据渲染结构的（没法保证v-for的遍历完成），
• 解决：思考了一下vue生命周期函数以及vue中的封装好的函数方法。nextTick函数：在下次DOM更新, 循环结束之后,执行延迟回调。在 修改数据之后 立即使用这个方法，获取更新后的DOM
• 收获：组件实例的$nextTick+watch方法，在今后经常使用，经常结合第三方插件使用，获取更新后的DOM节点

2. Css的盒子模型

• 标准盒模型（W3C）：box-sizeing：content-box（默认值）
  标准盒模型总宽度/高度：margin+border+padding+内容区宽度/高度（ 即 width/height 不包含 padding 和 border 值 ））
• 怪异盒模型（IE盒模型)：box-sizing:border-box
  标准盒模型总宽度/高度：margin+ (内容区宽度/高度 + padding + border) （ 即 width/height 包含 padding 和 border 值 ））

3. Push和fech的区别

• git push将远程的仓库的变化下载下来，与和本地的分支做合并
• git fetch将远程的仓库的变化下载下来，并没有和本地的分支做合并

4. SPA单页面项目

• 概念：SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS实现页面的渲染加载。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互、避免页面的重新加载。

• 优点：

  • 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
  • 基于上面一点，SPA 相对服务器压力小；
  • 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

• 缺点：

  • 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载
  • 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
  • SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

• 劣势解决：

  • SPA单页面应用实现前进与后退功能

前言：SPA单页面应用：在使用ajax与服务器数据交互过程中，实现局部数据的更新时，浏览器地址栏的url链接并没有发生改变，浏览器因为不会保存更新记录（浏览器会记录地址栏的url资源链接，如果url链接发生变化，浏览器会把该url链接保存到一个特殊的数据结构中，这样当用户点击返回与前进按钮时，会快速访问已经被记录的url链接资源。）。这时候再去返回就会出现非期待性的结果

- 解决方案：设置window.location.hash（location.hash）+ 监听window.onhashchange

//在ajax与服务器进行交互时，设置window.location.hash的值：
function updateView (attr){
            $.ajax({
            	type:...,
                url:...,
                data:{attr : attr},
                success:function(datas){
                	//设置hash值
                	 window.location.hash = "#"+attr;
                	//do somthing
                },
                error:function(status){
					//do somthing
                }
            });
        }
        //attr 这个值最好是该次请求所需的参数 设置onhashchange事件监听 
     window.onhashchange=function(){
 	var attr=window.location.hash.replace("#","");
 	updateView (attr);
    	 }    
    	 //但是上述这样单纯的只要用户点击第一页的视图，ajax请求成功后，会主动改变hash值，这时候又触发onhashchange，又一次更新视图，两次访问服务器。
    	 //解决办法
    	 //设置一个全局变量，记录hash值的改变是怎样引起的：
    	  var innerDocClick;
        $('body').on('mouseleave',function(){
        	innerDocClick=false;//鼠标在页面外（点击了返回按钮）
        });
        $('body').on('mouseover',function(){
        	innerDocClick=true;//鼠标在页面内（没有点击返回按钮）
        });
       

        window.onhashchange=function(){
        	if(!innerDocClick)//若点击了返回按钮  加条件判断去更改hash值
        		{
        			var attr=window.location.hash.replace("#","");
 					updateView (attr);
        		}
    	 }

第二种解决方法是在页面中嵌入一个隐藏 iframe，由于浏览器可以对 DOM 树中 iframe 节点的 src 属性进行历史记录跟踪，这样通过在逻辑上建立一条“页面 URL – 页面内 iframe URL – 页面状态”的对应链，同样可以在 IE 中建立片段标识符与页面状态的联系。

5.SEO优化

• 概念：seo是搜索引擎优化。是一种利用搜索引擎的规律提高网站在有关搜索引擎的排名,是一种网络营销方式。

搜索引擎的规律：是靠搜索关键字来让自己的网站在搜索栏的第一页内，展示在用户的最前面，能让用户第一时间看到自己的网站。

• 1.站内优化：
  • META标签的优化：例如：title,keywords,description等的优化；（logo图片）
  • 网站文章的更新：每天保持站内文章的更新；
• 2.站外优化：
  • 友链互换：与一些和你网站相关性比较高，整体质量比较好的网站交换链接，巩固稳定关键词排名。

补充
高质量网站有哪些特点
1.内容受众
2.时效性强
3.设计与布局整洁干净
4.无虚假违法信息

6.BOM浏览器对象模型

• 1.window对象

  • 概念：BOM的核心对象是window，它表示浏览器的一个实例，它也是ECMAScript规定的Globle对象，也就是说网页中任何一个对象都是在window这个对象里面的

常用的方法：
1.alert()
2.定时器

• 2.location对象

  • 概念： location属性用于获得当前窗口中加载的文档有关的信息或者设置窗体的URL，并且可以解析URL，因为返回的是一个对象，因此可以叫做location对象，还有一些导航功能，值得注意的是location既是window对象的属性，又是document对象的属性，既window.location和document.location 引用的是同一个对象。
  • URL: Uniform Resource Locator 统一资源定位符 :是互联网上标准的地址。互联网上的每个文件都有唯一的URL，包含 通过地址属性可以得到不同的url的信息图片location对象的属性

常用的方法：
location.href = “http://www.666.com”; //页面跳转到该网址
location.assign(“http://www.666.com”); //页面跳转到该网址
location.hash用于设置页面的标签值

• 3.navigator对象：
  • 概念：该对象里面保存着浏览器的各种信息，判断浏览器的各种信息就是从该对象里的属性来读取，具体属性如下图：

常用的方法：
navigator.cookicEnablcd:判断是否启用cookic
navigator.userAgent:判断浏览器的名称和版本号
navigator.plugins:保存浏览器中所有插件信息的集合

    <script>
        function hasPlugin(name) {
            name = name ? name.toLocaleLowerCase() : '';
            console.log('name = ' + name);
            var plugins = navigator.plugins;
            for (var i = 0; i < plugins.length; i++) {
                //console.log(typeof plugins[i]);
                console.log(plugins[i].name);
                return plugins[i].name.toLocaleLowerCase().indexOf(name) !== -1 ? true : false;
            }
        }
        var r = hasPlugin('pdf');
        console.log(r);

• 4.history对象：
  • 概念：该对象保存着用户上网的历史记录，从窗口被打开的那一刻算起

常用方法：
1.前进：history.forward();history.go(1);
2.后退：history.back();history.go(-1);
3.获取记录个数：history.length:

7.数组中的一些方法

8.解构赋值

• 概念：变量的解构赋值，ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。这种方式的出现大大提高了代码的扩展性
• 常见的使用场景
  • 1.交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

- 2.从函数返回多个值

//返回一个数组，用结构赋值可以非常方便的取到对应值
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

//返回一个对象，获取对应的属性值
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

- 3.取 JSON 数据

解构赋值对提取 JSON 对象中的数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
// 上面代码可以快速提取 JSON 数据的值。

• 对象的解构赋值
• 数组的解构赋值
  • 1.同时赋值多个变量

let arr = [a,b,c,d] = [1,2,3,4]

• 2.解构嵌套数组

//解构嵌套数组，就是模式匹配，只要等号两边的层级结构相同，就可以拿到对应位置的值
const arr = [1, [2, 3, [4, 5, 6]]];
const [a, [b, c, [d, e, f]]] = arr;

• 3 相同“模式”的不完全解构

let [a, b, c] = [1, 2, 3, 4]; // 1 2 3
let [a, b, c, d] = [1, 2, 3]; // 1 2 3 undefined
let [a, [b, c, [d, e]]] = [1, [2, 3, [4, 5, 6]]]; // 1 2 3 4 5

• 4.解构的默认值

let [a = true] = [];
a // true

注意
数组的解构是根据它的位置（模式）对应的
解构操作允许有默认值，但一定是已经声明的。
如果等号的右边不是数组（或者严格地说，不是可遍历的结构）那么将会报错

9…args剩余参数(扩展运算符)

展开运算：允许一个表达式在某处展开。展开运算符在多个参数（用于函数调用）或多个元素（用于数组字面量）或者多个变量（用于解构赋值）的地方可以使用。

• 1.函数调用中使用展开运算符（传参）

在ES6之前将整个数组里面的元素依次作为实参传递给函数形参的时候使用Function.prototype.apply的特性

let arr = [1,2,3]
function test(a,b,c){}
test.apply(null,args)  //通过apply特性将数值的形式转换为数组对应传递进去

ES6之后展开运算符

let arr = [1,2,3]
function test(a,b,c){}
test(..arr) //将数组展开进行传递参数

• 2.数组中使用展开运算符(合并数组，类数组对象变成数组)

a.合并数组
let arr = [1,2,3]
let arr1 = [...arr,4,5,6]  //1,2,3,4,5,6

b.展开运算符可以用于数组的一些方法中（push函数）
let arr = [1,2,3]
let arr1 = [4,5,6]
arr1.push(...arr) //4,5,6,1,2,3

c.类数组对象变成数组
let a=new Set([1,2,3,4,5,2,1])  // a : Set(5) {1, 2, 3, 4, 5}
let b=[...a]    //  (5) [1, 2, 3, 4, 5]

• 3.解构赋值（解构赋值中展开运算符只能用在最后）

let [arg1,arg2,...arg3] = [1, 2, 3, 4] 
arg1 //1
arg2 //2
arg3 //['3','4']

• 4.对象中的展开运算符（和数组类似）

let {x,y,...z}={x:1,y:2,a:3,b:4};
x; //1
y; //2
z; //{a:3,b:4}

let z={a:3,b:4};
let n={x:1,y:2,...z};
n; //{x:1,y:2,a:3,b:4}

let a={x:1,y:2};
let b={z:3};
let ab={...a,...b};
ab //{x:1,y:2,z:3}

剩余参数：剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

• 1.函数调用

function test(a,b,...args){} //...args == [4,5,6]
test(1,2,3,4,5,6)

• 2.解构赋值（解构赋值中展开运算符只能用在最后）

let [arg1,arg2,...arg3] = [1, 2, 3, 4] 
arg1 //1
arg2 //2
arg3 //['3','4']

10.arguments 对象

1.定义：arguments是一个对应传递给函数参数的类数组对象,arguments对象是所有非箭头函数都有的一个局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。
2.特性：

• arguments对象并不是一个数组，除了length和索引元素之外，任何数组的属性都没有。当然它可以被转换为数组

const args = Array.from(arguments); 
const args = [...arguments];

• arguments存在属性callee：

属性callee相当于调用自身函数，可以用作匿名函数的递归：
var sum = function (n) { 
if (1 == n){ 
return 1; 
} else {
 return n + arguments.callee(n - 1); //6 5 4 3 2 1 } } alert(sum(6)); 输出结果：21
 }

3.作用：

a.无需明确命名参数，就可以重写函数，在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们
function sayHi(message) {
  alert(arguments[0]);   // 此处将打印message参数的值
}

b.检测参数个数（ arguments.length ）
function howManyArgs() {
  alert(arguments.length);
}
howManyArgs("string", 45);
howManyArgs();
howManyArgs(12);   //  上面这段代码将依次显示 "2"、"0" 和 "1"。

c.针对同一个方法被多处调用，但是参数数量不确定的情况下，可以更具arguments索引进行判断。
 function func1() {
            console.log(arguments[0]); // 1 
            console.log(arguments[1]); // 2 
            console.log(arguments[2]); // 3 
        }
        func1(1, 2, 3)

d.模拟函数重载
用 arguments 对象判断传递给函数的参数个数，即可模拟函数重载
当只有一个参数时，doAdd() 函数给参数加 5。如果有两个参数，则会把两个参数相加，返回它们的和。所以，doAdd(10) 输出的是 “15”，而 doAdd(40, 20) 输出的是 “60”。
function doAdd() {
  if(arguments.length == 1) {
    alert(arguments[0] + 5);
  } else if(arguments.length == 2) {
    alert(arguments[0] + arguments[1]);
  }
}
doAdd(10);	//输出 "15"
doAdd(40, 20);	//输出 "60"

$11. Promise以及底层封装

12.浅拷贝深拷贝

2.拷贝数据的方式：
（1）直接赋值给一个变量

（2）Object.assign() 浅拷贝

（3）Array.prototype.slice() 深拷贝

（4）Array.prototype.concat() 深拷贝

（5）JSON.parse(JSON.stringify()) 深拷贝

（6）Loadsh库中的API，如：.clone()、.cloneDeep()

（7）扩展运算符…arr 深拷贝

浅拷贝（对象，数组）
特点：拷贝的时候只是拷贝了一份引用，修改拷贝以后的数据会影响原来的数据。
浅拷贝只是拷贝一层，更深层次对象级别的值拷贝引用
如何浅拷贝：1.直接赋值 2.遍历赋值 3.ES6的语法糖，object.assign(给谁，拷贝谁）只要一层就没有问题

 		let a = {
            age: 1,
            color:[1,2,3],
            like:{
                sing:4,
                dance:5
            }
        }
        let b = {} 
        Object.assign(b, a);
        b.like.sing = 2;
        console.log(a.like.sing) // 原本是4现在变成了2这就是浅拷贝拷贝了复杂类型的地址

深拷贝（深度克隆）
特点：拷贝的时候会生成一份新的数据，修改拷贝以后的数据不会原数据。
拷贝多层，每一层的数据都会拷贝

		let a = {
            age: 1,
            color:[1,2,3],
            like:{
                sing:4,
                dance:5
            }
        }
        let b = {} 
        var deepCopy = function(newObj,oldObj){
            for(let k in oldObj){
                // k是属性名，oldObj[k]是属性值
                // 进行递归判断
                let item = oldObj[k]
                if(item instanceof Array){
                    // 设置新的对象的属性名并且声明类型
                    newObj[k] = []
                    // 再次调用
                    deepCopy(newObj[k],item)
                }else if(item instanceof Object){
                    newObj[k] = {}
                    // 再次调用
                    deepCopy(newObj[k],item)
                }else {
                    newObj[k] = item
                }
            }
        }
        deepCopy(b,a)
、、、简化代码
 function deepClone(obj) {
            var myObj = obj instanceof Array ? [] : {}
            for (let key in obj) {
                myObj[key] = typeof (obj[key]) =='object'?deepClone(obj[key]): obj[key]
            }
            return myObj
        }

补充：深拷贝其他的实现方法
JSON.parse(JSON.stringify(obj)）也可以实现深拷贝，但是弊端较多，例如无法识别undefined，symbol
lodash库里面的API_.cloneDeep(value).clone()
Array.prototype.slice() 深拷贝
Array.prototype.concat() 深拷贝
扩展运算符…arr 深拷贝

$13.组件之间的通信

1、props和emit
2、Ref和$parent/$children
3、eventBus\emit\on 兄弟、父子组件通信
4、$attrs\listeners 隔代通信
5、Provide\inject 隔代组件通信
6、Vuex
7、Pubsub库

14.JS数据类型/数据结构

基本数据类型（简单数据类型）7种：number，string，boolean,null,undefined，symbol，bigInt
复杂数据类型：array，function，object

15.对象和数组有什么区别

1.数组表示有序数据的集合，而对象表示无序数据的集合。如果数据的顺序很重要，就用数组，否则就用对象
2. 数组是种有顺序的链表，对象是无顺序的键值对。
3. 数组有length属性，对象没有

16.如何判断什么是一个对象和数组

1.instanceof
2.对象的constructor属性

var arr = [1,2,3,1];
var obj = {
a:“A”,
c:“C”
}
　console.log(arr.constructor === Array)//true
　console.log(obj.constructor === Object) //true

3.Array.isArray([]) //true ES6语法
4.Object.prototype.toString.call(arr) 利用对象的toString可以准确判断是什么类型，call()改变this指向，这里是借用Object的方法
为什么不用Object.toString？
答：虽然所有对象的原型链最顶端都是Object.prototype，但同时Object本身也是一个构造函数，继承于Function，调用Object.toString最终通过原型链调用的是Function.prototype.toString

拓展：num.toString（）//"123"1.把数字转换为字符串2.num.toString（2）//转换为二进制的字符串

$17.原型和原型链

18二进制

1.let “” = x % n 2. x / n

19.HTTP状态码

200 成功状态码
202服务器已经接收到请求数据，但尚未进行处理
206 发送范围请求头Range抓取到资源的部分内容（大文件下载、分割多个部分同时下载等）
301 永久重定向（永久移动）
302 暂时重定向（临时移动）
304协商缓存（请求的资源未修改）
307临时重定向
400服务端无法理解（客户端语法错误）
401用户需要验证
403请求已成功，但被拒绝
404找不到资源,请求资源不存在
500服务器内部错误
505服务器不支持请求的HTTP协议版本

$ 20.项目部署

系统开发:修改端口server.port = 80 打包
服务器准备、环境配置：云服务，阿里云—云服务器ECS—实例—创建实例—购买服务器(cpu ,内存，硬盘，操作系统镜像)—网络配置(分配公网IPV4地址，带宽，安全组中Linux端口22,window端口3389)—会有公网和私网IP，用户名和密码
在操纵系统中安装目标程序所需要的环境：用FTP工具将本地上传到服务器，建立连接—主机：公网IP，协议：SFTP/SSH 端口： 用户名： 密码：
程序部署及运行：打包–上传(FTP工具)—启动
域名绑定：字母与IP绑定，访问域名相当于访问IP地址，购买域名—域名备案(ICP)—域名解析(解析，添加记录：记录值是IP地址，域名)

二、

1.VUE vuex的五大属性和工作原理

state, getters, mutations, actions, modules。
1.state：vuex的基本数据，用来存储变量

在vue中使用 this.$store.state.userId

2.geeter：从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法

在vue中使用 this.$store.getters.userIdDouble

3.mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

commit 同步操作，写法： this.$store.commit(‘mutations方法名’,值)

4.action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)

5.modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
　　 简单来说就是可以把以上的 state、mutation、action、getters 整合成一个user.js,然后放到store.js里面

19.vue生命周期之间的差别**

HTMLmeta标签的作用

meta标签用来描述一个HTML网页文档的属性
有四种属性：1.charset、2.name、3.content、4.http-equiv

• charset： 页面中的必须标签，说明页面是UTF-8格式，防止乱码。
  unicode UTF-8详情http://t.csdn.cn/P8WaN
• name： name属性主要用于描述网页，content中为属性对应的属性值，content中的属性值主要是便于搜索引擎机器人查找信息和分类信息用的。

name的参数有：
keywords（关键字）为搜索引擎提供网站的关键字
description(网站内容描述)为搜索引擎提供网站主要内容。
application-name（应用程序名称）
viewport（用于移动端页面控制）指定页面控制及缩放比例。

content内容如下：
width：设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale：设置页面的初始缩放值，为一个数字，可以带小数，通常为1.0（1.0为正常大小）
minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数

• http-equiv:指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

http-equiv的参数有:refresh重定向,在规定的时间之后跳转到另一页面

<meta http-equiv="refresh" content="5;url=http://www.w3school.com.cn" />

Doctype有什么作用

DOCTYPE是document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

本地存储

把数据存到用户的浏览器里面
设置方便，易于读取，甚至刷新页面也不会丢失数据
只能储存字符串，可以将对象JSON.stringify()编码后存储

应用场景

用户登录向服务器请求数据

CSS盒子居中显示

1.定位 子绝父相

-1.1 margin设置为auto

.child {
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto; }

• 1.2 transform使子盒子往“回”移动自己宽高的一半

.child {
position: absolute;
top: 50%;
left: 50%；
transform: translate(-50%, -50%);

2.flex布局
将父盒子设置成弹性盒容器
让子元素水平居中，垂直居中

.parent {
display: flex;
justify-content: center;
align-items: center;
}

• 3.inline-block行内块元素
  text-align: center; 只对行内元素和行内块元素有用

.parent {
text-align: center;
line-height: 500px;
}
.child {
display: inline-block;
vertical-align: middle; vertical-align 属性设置一个元素的垂直对齐方式。middle把此元素放置在父元素的中部。
}

CSS盒子右边固定，左边自适应
1.固定盒子浮动+ 自适应盒子width: 100%;//宽度等于百分之百

.left {
float: left;
width: 200px;
height: 400px;
background: red;
}
.right {
width: 100%;//宽度等于百分之百
height: 400px;
margin-left: 200px;
background: blue;
}

2.flex布局父容器设置 display：flex；Right部分设置 flex：1

.box{ display: flex;}

.left{width:200px;background: red;}

.right{width:%;flex:1;background: blue;}/等于左边栏宽度/

3.左右两边都绝对定位

.left{width:200px;background: red; position: absolute;left:;}

.right{width:100%;background: blue;position: absolute;left:200px;}/等于左边栏宽度/

Flex布局

JS数组和对象的一些方法

判断一个数组

判断一个对象是否是空对象

JS执行机制

事件委派

有哪些异步任务

定时器的秒数为0是不是立即执行函数

Es6的新特性，用过哪些（结构赋值）

Map方法返回值是什么？

跨域的方法

V-if v-show

nextNick

JS继承

Vue的生命周期函数

生命周期：每一个vue实例从创建到销毁的过程就是vue这个实例的生命周期
生命周期过程：开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程

• 1.beforeCreate（创建前）在实例初始化之后执行此时对象还未创建，el 和data并未初始化，因此无法访问 methods,data ,computed等方法和数据。

使用场景：可以在此时加一些 loading 效果，在 created 时进行移除。

• 2.create(创建后) 最早开始使用data和methods中的数据的钩子函数，这个阶段可以数据请求，但是不能dom操作。

使用场景：需要异步请求数据的方法可以在此时执行，完成数据的初始化。

• 3.beforeMounted（挂在前）挂载开始之前被调用，把data里面的数据和模板生成html，完成了el和data初始化，注意此时还没有挂载到html页面上。
• mounted（挂载后）挂载完成，HTML已经被渲染到了页面上，这个阶段可以执行dom操作，可以进行数据请求。

使用场景： 当需要操作 dom 的时候执行，可以配合$.nextTick 使用进行单一事件对数据的更新后更新dom。

• 4.beforeUpdate（更新前）数据更新前调用,当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的。
• 5.update（更新后） 由于数据更改导致的虚拟 DOM 重新渲染，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick。

使用场景： 当数据更新需要做统一业务处理的时候使用。

• 6.beforeDestory（销毁前）实例销毁之前调用，在这一步还可以做一些释放内存的操作
• destory（销毁后）实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有.的事件监听器被移除，所有的子实例也都被销毁。
• 7.errorCaptured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
• 8.activated keep-alive 缓存的组件激活时调用。
• 9.deactivated keep-alive 缓存的组件停用时调用。
• 10.$nextTick

undefined、null、NaN有什么区别？

从数据类型上：

• undefined和null是原始数据类型，NaN表示为not a number，用typeof检测undefined返回undefined，null返回object，NaN返回number

从使用场景上：

• undefined 表示未定义是所有没有赋值变量的默认值，是自动赋值为undefined
• null 表示空值，可以用null赋值给变量去清空变量
• NaN的场景就比较多，比如数据的类型转换时，被转换的数据不含有可以转换的部分，就会返回NaN

注意：NaN是一种特殊类型的的number，它与任何数据都不相等，包括自己本身，其他数据类型和NaN运算的结果都是NaN

get和post其它请求方式

vue底层的实现源码逻辑

get ,set

三、

1.JS垃圾回收机制

原文链接：详情
来源：解决内存的泄露，垃圾回收机制会定期（周期性）找出那些不再用到的内存（变量），然后释放其内存。
现在各大浏览器通常采用的垃圾回收机制有两种方法：1.标记清除，2.引用计数。

• 标记清除

js中最常用的垃圾回收方式就是标记清除。垃圾回收机制在运行的时候会给存储再内存中的所有变量都加上标记（可以是任何标记方式），然后，它会去掉处在环境中的变量及被环境中的变量引用的变量标记（闭包）。而在此之后剩下的带有标记的变量被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后垃圾回收机制到下一个周期运行时，将释放这些变量的内存，回收它们所占用的空间。

工作原理：

当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程：

垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记； 去掉环境中的变量以及被环境中的变量引用的变量的标记；
被加上标记的会被视为准备删除的变量； 垃圾回收器完成内存清理工作，销毁那些带标记的值并回收他们所占用的内存空间。
到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

• 引用计数

语言引擎有一张"引用表"，保存了内存里面所有资源（通常是各种值）的引用次数。如果一个值的引用次数是0，就表示这个值不再用到了，因此可以将这块内存释放。

工作原理：跟踪记录每个值被引用的次数。

工作流程：
声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1
同一个值又被赋值给另一个变量，这个引用类型值的引用次数加1；
当包含这个引用类型值的变量又被赋值成别的值了，那么这个引用类型值的引用次数减1； 当引用次数变成0时，说明没办法访问这个值了。
当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存;

扩展：

但是，为了减少内存垃圾，我们还是可以对javascript代码进行彻底检查，有些代码中存在明显的产生过多内存垃圾的问题代码，这些正是我们需要检查并且完善的。

2.form表单的使用以及相应的属性值

type:

• type=”text”是定义表单里面的单行文本框；
• type=”password” 定义密码框；
• type=”radio” 单选勾选框；
• type=”checkbox” 多选勾选框；
• type=”submit” 提交按钮；
• type=”reset” 重置按钮；
• type=”button”或者 两种方式都可以实现空按钮；
  menthod
• 其中 get/post 之间的区别
• get传送的数据量较小，不能大于2KB。post传送的数据量较大，
• get安全性非常低，post安全性较高。但是执行效率却比Post方法
  好。
  action
• action=url用来指定处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.
  target
• ”“指定提交的结果文档显示的位置：
• • _blank ：在一个新的、
    无名浏览器窗口调入指定的文档；
• _self ：在指向这个目标的元素的相同
  的框架中调入文档；
• _parent ：把文档调入当前框的直接的 frameset框中；

3.vue中的双向数据绑定原理（重点深入学习）

vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

• 核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法
• （1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性） descriptor （具体的改变方法）
• （2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

4.vue单向数据流

vue单向数据流：在vue中需要遵循单向数据流原则

在父传子的前提下，父组件的数据发生会通知子组件自动更新
子组件内部，不能直接修改父组件传递过来的props => props是只读的

vue调试工具的使用？

项目是否部署到服务器上，部署的整个过程
如何看待加班
如何学习一门新技术
周围朋友同学如何评价你
学过react没？

反问：
对加班如何看待效率会比较低的看法，待遇，福利（五险一金），转正，学习