H5前端题目总结

1.src与href的区别

(1)请求资源类型不同
①href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a标签
②在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有:script，img 、iframe；
(2)作用结果不同
①href 用于在当前文档和引用资源之间确立联系
②src 用于替换当前内容
(3) 浏览器解析方式不同
①若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用
link 方式加载 CSS，而不是使用 @import 方式。
②当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源
应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.let const 和 var 的区别 ？

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

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

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

9.解释什么叫回调地狱 以及怎么解决回调地狱 ？

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

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

1.创建对象
2.设置回调函数
3.设置请求地址
4.设置open()方法
5.设置请求头（GET请求可以忽略这一步）
6.发送请求

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

以下任意一种情况不同都会导致跨域：
协议不同： http://
子域名不同：www
主域名不同：baidu.com
端口号不同：8080
ip地址和网址不同：www.baidu.com
跨域解决方法：1、jsonp
2、cors跨域资源共享
3、设置document.domain
4、用Apache做转发（逆向代理），让跨域变成同域

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

BeforeCreate 实例创建之前调用
Created 实例创建成功，此时data中的数据已经初始化
beforeMount 挂载之前的状态,
Mounted 已经挂载的状态
BeforeUpdate 数据更新前的状态
Updated 数据更新完成时的状态
beforeDestory 在vue实例销毁之前调用，
Destoryed 在vue实例销毁之后调用，vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
————————————————
版权声明：本文为优快云博主「雨生百谷，方为谷雨」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/weixin_44058725/article/details/102695638

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

Key可以标识组件的唯一性,为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM保持数据的唯一，如果不绑定会导致所有列表DOM重新渲染
————————————————
版权声明：本文为优快云博主「Moveღ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/a456456_132/article/details/118190802

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 组件通信如何实现，至少列举3种方式并说明各自的局限性？

1.props 和 emit 父传子 子传父
父子组件传值:
父组件通过props向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed
2.$attrs / $listeners
$attrs与 $listeners 是两个对象， $attrs 里存放的是父组件中绑定的非Props 属性， $listeners里存放的是父组件中绑定的非原生事件。3.Bus总线在组件中，可以使用$emit， $on， $off 分别来分发、监听、取消监听事件;

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

data：初始组件的时候data拿到的是store的值是还没有输入过的原始值,点击按钮的时候，取data中的值是原始值，不能自己更新。
computed:换成计算属性时，是当值发生变化的时候，从新计算，不变化的时候拿到的是之前缓存的值。
watch:默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性,设置为true（immediate:true）

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

作用:包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。
目的:可以使被包含的组件保留状态,或避免重新渲染

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

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

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

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

20.说一说ES6常用的属性有哪些？

1)块级作用域
2)提供了定义类的语法糖
3)增加了一种基本数据类型(Symbol)
4)新增了变量的结构赋值
5)函数参数允许设置默认值，引入rest参数，新增箭头函数
6)数组新增一些API和一些方法
7)对象和数组新增了扩展运算符
8)ES6新增了模块化
9)ES6新增了set和map数据结构
10)ES6原生提供Proxy构造函数，用来生成Proxy实例
ES6新增了生成器（Generator）和遍历器（Iterator）

21.Promise的作用是什么？尝试将Fetch进行封装。

作用:
1)主要用于异步计算
2)可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3)可以在对象之间传递和操作promise，帮助我们处理队列
fetch(‘请求地址’)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});

22.说一说你对闭包的理解

闭包的优点是可以避免全局变量的污染；缺点是闭包会常驻内存，增加内存使用量，使用不当很容易造成内存泄漏。在JavaScript中，函数
即闭包，只有函数才会产生作用域。
闭包有3个特性：
（1）函数嵌套函数。
（2）在函数内部可以引用外部的参数和变量。
（3）参数和变量不会以垃圾回收机制回收。

23、在vue中如何让CSS只在当前组件中起作用？

在style中加入scoped;
例如:

<style scoped></style>

24.Vue里面如何获取dom元素？

1)直接给相应的元素加id,然后再document.getElementById(“id”);获取
2)使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素