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性能！