面 试 1

1.src 和 href 的区别

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

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

1.display属性为none，效果：元素不显示，不占位
2.设置css visibility属性为hidden，效果：元素不显示，但占位

3. 用过哪些盒模型？

1.标准盒模型（W3C盒子模型），设置的width或height是对实际内容（content）的width或height进行设置，内容周围的border和padding另外设置，即盒子模型的width（height）=设置的content的宽高+padding+border+margi
2.怪异盒模型（IE盒子模型），设置的width或height是对实际内容（content）+内边距（padding）+边框（border）之和的width和height进行设置的，其盒模型的width（height）=设置的width（height）+外边距margin
3.box-sizing: content-box 是W3C盒子模型
4.box-sizing: border-box 是IE盒子模型

4.谈谈你的移动端适配方案有哪些？

1. 1.布局视口：CSS布局，是以布局视口做为参照系来计算的。
   一般手机浏览器的默认布局视口宽度为980px(黑莓和IE的宽度为1024px)
   2.视觉视口：视觉视口是页面当前显示在屏幕上的部分
   3.理想视口：理想视口的大小取决于设备独立像素的大小
   4.Rem理想(适配)视口
   5.viewport视觉视口
   6.百分比布局视口

5.js 基本数据类型是什么？它们之间的区别是什么？

1.简单数据类型(也称基本数据类型)Undefined;Null;Boolean;Number和String…
2.引用数据类型(也称复杂数据类型),其中包括Object；Array；Function…
区别:
1)基本类型在栈内存,引用类型在堆内存分配地址.
2)不同的内存分配机制也带来了不同的访问机制
3)复制变量时的不同
4)参数传递的不同（把实参复制给形参的过程）

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

隐式转化:计算及程序自动完成的转换,但是不会在任何时候都发发生,只能在特地定的情况下执行
强制转换:强制转换就是手动吧数据转成想要的类型,但是不会改变元变量中储存的数据及数据类型

7.let const 和 var 的区别 ？

1.var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3.const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改

8.箭头函数和普通函数的区别?

1外形不同:箭头函数使用定义,普通函数中没有
2.普通函数可以有匿名函数,可以有具体名函数,但是箭头函数都是匿名函数.
3.普通函数可以用于构造函数,以此创建对象实例,但箭头函数不能用于构造函数不能使用new
4.箭头函数的tihis永远指向其上下文的this,任何方法都改变不了其指向,如call(),bind();普通函数的this指向调用他的那个对象

9解释什么叫回调地狱函数以及怎么解决回调地狱函数?

地狱回调概念：回调函数套回调函数的情况就叫做回调地狱，
Promise 解决方式 Async/await 解决方式

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

1创建对象
2设置请求方式和请求地址
3发送请求
4监听状态变化
5返回数据

例：
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState != 4)return;
if(xhr.status == 200 && xhr.readyState == 4){
console.log(xhr.responseText)
}else{
console.log(“请求失败”)
}
}

xhr.open(“get”,“http://localhost:3030”)
xhr.send()

11.什么情况下会导致跨域？怎么解决

不同源策略时会导致跨域
解决方法：
正向代理和反向代理
1.jsonp：原理就是利用了script标签src属性外联引入文件不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去；
2.document.domin:两个域名必须属于同一基础域名，并且所有的协议端口完全一致，否则无法跨域；
例：
beijing.58.com
tianjing.58.com ；
3.iframe、hash ：父页面向子页面传输数据：将要传递的数据添加到子页面的url的hash值上，子页面通过location.hash并添加定时器实时地动态父页面传来的数据；子页面向父页面传输数据：利用 window.name 的特性，及页面重新加载但当前页的 name值不变，即使换了一个页面。需要三个页面配合使用。一个应用页面，一个数据页面，一个代理文件。代理文件一般是一个没有任何内容的 html 页面，需要和应用页面在同一域下。将数据页面的窗口换成代理页面，代理页面通过 window.name获取数据页面留下的数据，应用页面再访问和它同源的代理页面获取数据，就完成了跨域；
4.CORS(Cross-Origin-Resource-Sharing)：在服务器端设置的,不需要客户端进行操作。Cors背后的思想是使用自定义的http头部让浏览器和服务器进行沟通，从而决定请求或响应是否应该成功，还是应该失败。浏览器向服务器发送请求，如果服务器认为这个请求可以接受，就在Access-Control-Allow-Origin头部中回发相同的源信息（如果是公共资源，可以回发*）;如果没有这个头部，或者有这个头部但信息源不匹配，浏览器就会驳回请求。正常情况下，浏览器会处理请求。（请求和响应都不包含cookie信息）；
5.服务器跨域，服务器中转代理：前端向本地服务器发送请求，本地服务器代替前端再向服务器接口发送请求进行服务器间通信，本地服务器是个中转站的角色，再将响应的数据返回给前端

12.vue 有几个生命周期 以及各个生命周期的调用时机 ？

1.beforeCreate:创建Vue实例前的时候执行;
2.created:创建Vue实例完成后执行;
3.beforeMount:Vue实例开始渲染前执行;
4.mounted:Vue实例渲染完成后执行;
5.beforeUpdate:Vue实例修改前执行;
6.updated:Vue实例修改完成后执行;
7.beforeDestroy:Vue开始消亡前执行;
8.destroyed:Vue实例消亡后执行;
9.activated:组件激活时调用。该钩子在服务器端渲染期间不被调用;
10deactivated:组件停用时调用。该钩子在服务器端渲染期间不被调用;
11.errorCaptured:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

13使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果？

Vue的v-for不绑定key，默认行为和绑定key="index"是差不多的，官方没有默认这种行为的情况下，会导致所有列表DOM重新渲染。
key="index"这种行为无法最大化性能，比如在第一个元素插入新元素，会导致所有列表DOM重新渲染。绑定key后，发现绑定的key值的元素变化了，就重新渲染该元素，而不是全部元素都重新渲染，会提高性能。性能主要是DOM渲染影响。key绑定id一类的唯一键好处就是在列表中插入某个元素，不会像index那样导致后面的元素全部重新渲染，而是根据绑定id的元素是否变化渲染。

14.v-show 和 v-if 的作用和区别, v-bind 和 v-model的作用和区别？

v-if和v-show的区别:
实现方式:v-if为DOM渲染属性, 通过添加删除DOM节点实现;
v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异;
加载性能:v-if加载速度更快;v-show加载速度慢;
切换开销:v-if切换开销大;v-show切换开销小;
一般来说,v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。
v-bind和v-model的区别:
v-bind：动态地绑定一个或多个特性,或一个组件 prop 到表达式使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用v-model:在表单控件或者组件上创建双向绑定,会根据输入变化

15.vue 组件通信如何实现 ？列举至少两种方式 并详细说明其机制？

父组件给子组件传值：父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、
子组件给父组件转值：子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

16.详细说明vue组件中 data ，computed 和 watch的区别？

data储存数据
computed是计算属性
watch作用是监听数据会返回两个值,第一个为新值,第二个为旧值
data:Vue 实例的数据对象。Vue 将会递归将 data 的 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)
Computed：是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算 computed默认只有getter方法
Watch： 是调用一次执行一次 如果监听数据变化都会执行回调

17.keep-alive的作用是什么？ 使用它的目的是什么？

在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。也就是说，keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存
使用它的目的是避免一个同样的数据重复请求
*keep-alive可以产生一个缓存,然后如果再次请求相同的数据时,就不再请求,而是使用缓存中的数据

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

vue-router
组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。

a标签
从一张页面跳转到另一张页面，但从这里来说就违背了多视图的单页Web应用这个概念
为什么不使用a标签？
通过router-link进行跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染的“无用功”。
通过a标签进行跳转，页面会被重新渲染，即相当于重新打开一个新的网页，体现为视觉上的“闪烁”（如果是本地的项目基本看不出来）

19.vuex 是什么？ 怎么使用？为什么用使用它？

Vuex状态管理架构，统一管理和维护各个vue组件的可变化状态
是状态管理，在main.js引入store，注入。只用来读取的状态集中放在store中；改变状态的方式是提交mutatios，这是个同步的事物；异步逻辑应该封装在action中。
应用场景：单页面应用中，组件间的状态，音乐播放，登陆状态，加入购物车vuex是一种集中式管理状态模式，按照一定的规则管理状态，保证状态的变化是可预测的

20请谈一下你对 使用原生js开发和 使用vue开发的看法。(至少20字以上)

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
vue就是一个js库，并且无依赖别的js库，跟jquery差不多。vue的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。