web前端面试必问的面试题

1.Vue 组件中 data 为什么必须是函数？

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。
当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的。

2. watch，conputed，methods的区别

methods 普通方法 没缓存,只有重新渲染页面的时候就会触发他

​ watch 监听属性 想监听哪个属性,那起名字的时候就要用这个属性名,一般用在异步操作,或者开销比较大的操作时候

​ computed 计算属性 有缓存,当你调用多次的时候只会计算一次,其他的值都是从缓存中直接拿的,当你依赖的属性发生变化时,计算属性会重新计算

3.分别简述computed和watch的使用场景

答：computed:
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的栗子： 购物车商品结算的时候
watch:
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　栗子：搜索数据

4.Vue的特点和优势、缺点

vue两大特点：响应式编程、组件化。

vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

vue是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和dom，这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

vue的缺点

1、Vue 不缺入门教程，可是很缺乏高阶教程与文档。同样的还有书籍。

2、VUE不支持IE8

3、生态环境差不如angular和react

4、社区不大

5.src和href的区别 ？

（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

6.说出几种vue当中的指令和它的用法？

v- 开头的特殊属性叫做指令这些是内置指令

v-html: 可以解析html标签 innerHTML

v-text : 不能解析标签,如果里面有标签会按照文本格式直接输出 textContent

v-if : 如果为true，当前标签才会输出到页面

v-else : 如果为false，当前标签才会输出到页面

v-show : 通过控制display样式来控制显示/隐藏

v-on : 绑定事件监听 缩写 @click v-on:click 一样

v-bind : 强制绑定解析表达式， 修改属性 简写 : v-bind:title="‘哈哈’" :title="‘哈哈’"

v-for : 遍历数组/对象

v-model : 双向数据绑定

v-once : 只会渲染一次

v-cloak : 解决闪现{{}}问题 与css配合 [v-cloak]{ display:none }

7.v-show和v-if的区别

v-if 当值等true的时候创建节点,等false的时候销毁节点,切换销毁性能更多

v-show 创建的时候消耗更大,切换的时候反而小一些,直接修改css, 当值等false 修改css的style display:none让标签隐藏起来

8.页面元素隐藏方式 和各自特点？

display:none; 设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。
visibility: hidden 这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不 会引起重排。
opacity:0 设置元素透明度opacity属性为0，也可以隐藏页面元素。在呈现上与visibility:hidden;方式一样， 同样会占据页面空间。
Overflow:hidden; 超出区域隐藏

8.用过哪些盒模型，以及他们各自的区别？

IE盒子模型box-sizing:border-box;（怪异模式）
W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式

content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。
padding-box:width和height属性包括padding的大小，不包括border和margin
border-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。
content-box不包含padding，border-box包含padding。所以如果你设置的大小是一样的，content-box看起来，会比border-box大

9. 在js中普通事件函数和监听事件函数的区别在哪里啊？

打个比方，一个是你给按钮A加了一个click的普通事件，这是没问题的，但是如果你再通过js或者其他方法动态又加了一个按钮A，那么这个按钮A点击了是不会触发的，但是你要是用了监听，比如on()来绑定一个click事件，那么他再次添加的按钮点击后也是可以触发的

10.jQuery中$.get()提交和$.post()提交有区别吗？

$.get()方法使用get方法来进行异步请求的，$.post()方法使用post方法来进行异步请求的；
  get请求会将参数跟在URL后进行传递，而post请求则是作为HTTP消息的实体内容发送给Web服务器的；
  get方式传输的数据大小不能超过2KB，而post要大得多；
  get方式的请求的数据会被浏览器缓存起来，因此有安全问题。

11.事件委托是什么

答案: 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

12.添加 删除 替换 插入到某个接点的方法

答案：

1）创建新节点
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

13. jQuery 库中的 $() 是什么？

$()函数是jQuery()函数的别称。() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

就是jquery对象，$()就是jQuery()，在里面可以传参数，作用就是获取元素

14. jQuery中 detach() 和 remove() 方法的区别是什么?

尽管 detach() 和 remove() 方法都被用来移除一个DOM元素,detach()方法是jQuery1.4版本中添加的，作用是删除掉所有匹配的元素，作用和remove()很像，但是它们还是有些不同之处。

remove()的作用是移除元素及其子元素，所有的绑定事件，附加元素也会被删除。
detach()的作用和remove()很像，不同的是它会保留绑定事件和附加元素。

15.ES6中class语法

class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法
使用class 定义的类 没有变量提升
使用extends 关键字继承
构造方法 constructor(){ this.name = name}
子类必须在constructor方法中调用super(name,age)方法用来新建父类的this对象
static 静态方法
静态方法是通过类名去访问,通过这个类 实例化出来的对象不能访问静态方法
继承的子类通过使用 类名.方法() 访问父类上的静态方法

16.理解 async/await以及对Generator的优势

async await 是用来解决异步的，async函数是Generator函数的语法糖
使用关键字async来表示，在函数内部使用 await 来表示异步
async函数返回一个 Promise 对象，可以使用then方法添加回调函数
当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句> async较Generator的优势：
（1）内置执行器。Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样
（2）更好的语义。async 和 await 相较于 * 和 yield 更加语义化　　
（3）更广的适用性。yield命令后面只能是 Thunk 函数或 Promise对象，async函数的await后面可以是Promise也可以是原始类型的值
（4）返回值是 Promise。async 函数返回的是 Promise 对象，比Generator函数返回的Iterator对象方便，可以直接使用 then() 方法进行调用

17.let const 和 var 的区别 ？

let 用来声明变量

声明变量,注意不能被定义过,变量不能被重复定义

let 声明的变量,没有变量提升 var声明的变量，有变量提升

let 声明变量后会生成块级作用域,比如 if 后的 { } , switch 的 { } 都能生成块级作用域,作用域外部不能在访问这个变量了

const 用来声明一个只读的常量,一旦声明,常量的值就不能改变

const 声明变量必须要赋值

使用 const 定义的对象或者数组,是可变的.

const一但被定义不能重新赋值,数组可以通过下标操作、或者用一些数组函数操作比如push()

const 关键字声明的变量要有初始值

const 在 { } 里面也能生成块级作用域

18.let有什么用，有了var为什么还要用let？

var存在因变量提升而导致的泄漏、覆盖等一些列问题，而let拥有自己的块级作用域而且修复了声明带来的变量提升问题

19.说明原生ajax的实现步骤？

//1.创建ajax对象
try{
		var ajax = new XMLHttpRequest();  //IE8以下不兼容
}catch(e){
		//IE8以下的声明方法
		var ajax = new ActiveXObjec(Microsoft.XMLHTTP);
}


//2.初始化
		ajax.open('get','./ajax_get.php?a=b&c=d',true);
		//参1 请求方式 get post
		//参2 url
		//参3 是否异步   true 异步  false同步

//3.发送请求
		ajax.send();		

//4.绑定状态改变事件,等待数据响应
		ajax.onreadystatechange =function(){
			//代表服务器成功相应数据了
			if(ajax.readyState==4  && ajax.status ==200){
				var mes = ajax.responseText;//获取服务器的相应数据
				console.log(eval(ajax.response))//把json字符串数据转换成json对象
			}	
		}


	readystatechange 事件类型
		请求的状态 ajax.readyState		 发生变化的时候调用	
			0:请求未初始化  (调用open方法之前)
			1:服务器连接已经建立(载入 已经调用send()方法,正在发送请求)
			2:请求已经接收(载入完成 send()方法完成,已收到全部响应内容)
			3:服务器处理请求(正在解析响应内容)
			4:服务器处理结束，返回结果(完成 响应内容解析完成,可以在客户端调用了)
		status属性 : 服务器(请求资源)的状态
返回的内容
	responseText:  返回以文本形式存放的内容
	responseXML: 返回XML形式的内容

20.vue-router的作用是什么？ 为什么不使用a标签？

Vue的创新之处在于，它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"，
Vue-router很好地继承了这一点，重渲染是我们不希望看到的，因为无论跳转到哪个页面，只需要渲染一次就够了。组件帮助我们实现了这个愿望
反观 < a>标签，每次跳转都得重渲染一次，在一个浩大的项目里，这多么可怕！我们的"渲染"做了许多"无用功"，而且消耗了大量弥足珍贵的DOM性能！

21.< keep-alive> < /keep-alive> 的作用是什么?

答:keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

22.数据类型强制转化和隐式转化的分别怎么使用？

数值:
Number(参数) 把任何的类型转换为数值类型
parseInt(参数1，参数2) 将字符串转换为整数
parseFloat() 将字符串转换为浮点数

字符串:
1.String(参数),可以将任何的类型转换为字符串
2.toString(),调用的格式 对象.toString(), 作用是将对象以字符串的方式来表示

布尔类型:
Boolean() 可以将任何类型的值转换为布尔值

函数:
isNaN( ) 该函数会对参数进行隐式的Number()转换，如果转换不成功则返回true;
alert() 输出的内容隐式的转换为字符串

隐式转换:
在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边 数据做一个数据类型转换，转成一样的数据类型再计算 这种无需程序员手动转换，而由编译器自动转换的方式就称 为隐式转换

23.js 数据类型有几种？它们之间的区别是什么？

JS中有两种数据类型
1.简单数据类型（也称基本数据类型）：Undefined;Null;Boolean;Number和String。
2.引用数据类型（也称复杂数据类型），其中包括Object；Array；Function等等。

基本数据: 1.基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值
2.基本数据类型不可以添加属性和方法
3.基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值， 然后把该值复制到为新变量分配的位置上
4.基本数据类型的比较是值的比较

引用数据类型 1.引用数据类型的特点和基本数据类型相反。
2.引用类型可以添加属性和方法
3.引用类型的赋值是对象引用
4.引用类型的比较是引用的比较