1.let var和const的区别
var:定义的变量,没有块的概念,可以跨块访问, 不能跨函数访问。
let:定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。
const:用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。如果定义的是一个对象,则可以修改。
2.new的执行过程
(1).向内存中开辟一个新地址
(2).通过this指向该地址.
(3).通过this给实例对象添加属性
(4).默认通过return this 返回给对象
3.get和post的区别
(1).传递参数
get:传递参数放在url里面.用?拼接.有限制.
post:传递参数放在request body里面.无限制
(2)请求次数
get:请求一次
post:请求两次.
(3).安全性
get的安全性没有post高
(4)使用
get:一般用来获取数据.
post:一般用来更改数据.
4.深拷贝和浅拷贝
浅拷贝:复制地址,一个更改,另一个不会更改
深拷贝:复制数据.一个更改,另一个跟着更改.
5.作用域链
当需要引用某个变量时,会先在当前作用域中去寻找,如果找不到再去往上一级作用域去寻找,直至全局作用域.这样链式查询关系我们称之为作用域链.
6.防抖和节流函数
(1)防抖函数:
短时间内多次触发只执行最后一次.
触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间
(2)节流函数:
无论触发多少次,只会在经过特定时间后再次执行.
高频事件触发,但在 n 秒内只会执行一次。
防抖在连续的事件,只需触发一次回调的场景有
搜索框搜索输入。只需用户最后一次输入完,再发送请求
手机号、邮箱验证输入检测
窗口大小resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有
滚动加载,加载更多或滚到底部监听
搜索框,搜索联想功能
7.全局混入
(1).什么情况下使用?
当好几个页面都需要引入同一个组件的时候,可以用全局混入。
(2).混入的内容
vue实例创建的内容都可以混入。
8.promise
(1).promise的作用
promise是用来解决回调地狱的。通过把异步代码写成同步代码的方式来解决回调地狱。
(2).promise的写法:
promise.then(成功之后要做的事情)
9.监听事件和计算属性的区别
(1).watch监听事件没有缓存
(2).computed计算属性有缓存。
10.v-if和v-show的
共同点:
(1).两者都是控制元素显示和隐藏的。
(2).区别
v-show:操作css的display属性。
v-if:操作的是dom对象.进行增加和删除.
(3).使用环境
v-show:当页面需要反复点击的时候。
v-if:不需要多次操作的时候。
11、数据类型
string、Boolean、number、null、underfined、object。
12、this的指向
(1).谁调用指向谁
(2).箭头函数没有this指向。需要使用的话,要转一下。
13、使用Ajax需要引入什么库
使用Ajax需要引入axios库。
14、created和mouthed
(1)、created:初始化完成。发生Ajax请求在这里使用
(2)、mouthed:挂载完成。当需要修改已经挂载完成的页面里面的视图的时候,在这个里面写。
15.过滤器
全局过滤器:filter
局部过滤器:filters
过滤器需要通过管道符|调用。调用方式链式调用。
16.js的四种设计模式
a.单列模式 (定义一个普通对象)
b.工厂模式
c.适配器模式
d.外观模式
17.11.vue2和vue3的区别
响应式原理不同,从vue2中的Object.definePropert()改成了vue3的Proxy
Vue3在vue2的基础上引入了组合式API。
按需引入,控制响应式数据的量,保证速度更快,体积更小
18.js内存(堆内存和栈内存有什么区别)
普通类型数据使用的是栈内存,一个数据就会开辟一个空间,从一个变量向另一个变量复制基本类型的值,会创建这个值的副本。
引用类型使用的是堆内存,它存储的是一个内存地址,从一个变量向另一个变量复制引用类型的值时,复制的其实是指针,因此两个变量最终指向同一个对象。
19.了解虚拟dom吗
操作DOM的代价是昂贵的,为了尽可能的节省DOM操作,引入了虚拟DOM的概念,它其实就是一个js对象,当数据发生改变时,会生成新的虚拟DOM对象,并和旧的DOM树对比,最后映射成真实DOM
20.localstorage和sessionstorage和cookie的区别
localStorage:是永久的,关闭页面或浏览器之后 localStorage 中的数据也不会消失。除非主动删除数据,否则数据永远不会消失
sessionStorage:是仅在当前会话下有效。是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的。
cookie:只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右, 有个数限制(各浏览器不同),一般不能超过20个。缺点是不能储存大数据且不易读取。
21.vue生命周期
beforeCreate( 创建前 )
created ( 创建后 )
beforeMount( 挂载前 )
mounted ( 挂载后 )
beforeUpdate ( 数据修改后挂载前 )
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)
22.vue中怎么操作dom
原生js操作:
document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.querySelector()
使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
23.v-if v-for 能不能共用
不建议,因为vue2中v-for的优先级要高于v-if所以不管v-if判断是否需要渲染都会先执行v-for这会导致性能的浪费,所以不建议在一个标签上共用。
24.computed和watch的区别
computed支持缓存,只有依赖数据发生改变,才会重新进行计算
watch不支持缓存,当监听的数据变时,直接会触发相应的操作;
25.如何水平垂直居中一个元素
1、利用定位(常用方法,推荐)
2、flex布局:justify-content: center align-items: center
3、定位+margin-top: -50%;
4、定位+transform
5、margin:auto;子绝父相,四个方位都为0。
26.为什么需要清除浮动
1、父元素的高度无法被撑开,影响与父元素同级的元素;
2、与浮动元素同级的非浮动元素(内联元素)会跟随其后;
3、若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构解决方法
27.清除的方式
1、父级 div 定义 height ,原理:父级 div 手动定义 height,就解决了父级 div 无法自动获取到高度的问题。 简 单、代码少、容易掌握 ,但只适合高度固定的布局.
2、结尾处加空 div 标签 clear:both ,原理:在浮动元素的后面添加一个空 div 兄弟元素,利用 css 提高的 clear:both 清除浮动,让父级 div 能自动获取到高度 ,如果页面浮动布局多,就要增加很多空 div,让人感 觉很不好 .
3、父级 div 定义 伪类:after 和 zoom
4、父级 div 定义 overflow:hidden
超出盒子部分会被隐藏,不推荐使用.
- 双伪元素法:
28.什么是重绘和回流?
比如改变元素颜色,这样的行为是不会影响页面布局的,DOM树不会变化,但颜色变了,渲染树得重新渲染页面,这就是重绘制
比如我们增删DOM节点,修改一个元素的宽高,页面布局发生变化,DOM树结构发生变化,那么肯定要重新构建DOM树,而DOM树与渲染树是紧密相连的,DOM树构建完,渲染树也会随之对页面进行再次渲染,这个过程就叫回流
回流必将引起重绘,而重绘不一定会引起回流。比如:只有颜色改变的时候就只会发生重绘而不会引起回流。
29.怎么判断数据的类型
(1)typeof:可以用来区分除了null类型之外的原始数据类型,对象类型的可以从普通对象里面识别出函数:判断是否为null 可以直接使用===(全等运算符)来进行判断
(2)、instanceof
instanceof 不能用于判断原始数据类型的数据
instanceof 可以用来判断对象的类型
用来判断这个构造函数的原型是否在给定对象的原型链上
(3)、Object.prototype.toString
该方法没有办法区分:数字类型和数字对象类型
同理还有:字符串类型和字符串对象类型,布尔类型和布尔对象类型
(4)、Array.isArray可以用来判断value是否为数组
30、如何优化性能。
1、尽量减少循环嵌套。
2、代码尽量使用封装,减少代码量。
3、组件的模块的导入尽量按需导入。
4、路由尽可能使用懒加载模式。
5、第三方组件库尽量按需导入。需要用哪个就导入哪个。
6、尽量使用精灵图,减少图片的插入。
31.原型链是什么
我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去prototype里找这个属性,这个prototype又会有自己的prototype,于是就这样一直找下去,也就是我们平时所说的原型链的概念。
简单一点就是就是利用原型让一个引用类型继承另一个引用类型的属性和方法。
32.常用的数组方法以及区别
(1)foreach:普通循环
(2)find:查找:条件成立返回找到的那一项,没有找到返回undefined
(3)findindex:查找:条件成立返回找到的索引,没有找到返回-1
(4)some:查找,只要条件成立就返回true
(5)every:循环每一项的条件都成立才会返回true
(6)filter:数组筛选,会生成新数组将条件成立的添加到新数组中
(7)map:映射新的数组, 根据原数组对数据进行处理,从而返回一个新的数组, 数组长度和原数组一样
(8)indexOf:简单数据类型查找:和findindex相同,不过findindex可用于复杂数据类型查找
(9)includes:简单数据类型查找:和some相同
(10)reduce:计算累加后返回Sum。
33.回调地狱是如何形成的。
回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象。
34.promise的缺点。
1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。
2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
3、当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
35.如何给SPA做SEO
(1)SSR服务端渲染
将组件或页面通过服务器生成html,再返回给浏览器,如nuxt.js
(2)静态化:
目前主流的静态化主要有两种:(1)一种是通过程序将动态页面抓取并保存为静态页面,这样的页面的实际存在于服务器的硬盘中(2)另外一种是通过WEB服务器的 URL Rewrite的方式,它的原理是通过web服务器内部模块按一定规则将外部的URL请求转化为内部的文件地址,一句话来说就是把外部请求的静态地址转化为实际的动态页面地址,而静态页面实际是不存在的。这两种方法都达到了实现URL静态化的效果
(3)使用Phantomjs针对爬虫处理
原理是通过Nginx配置,判断访问来源是否为爬虫,如果是则搜索引擎的爬虫请求会转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫。
36.如何设置登录权限。
1、当用户登录之后,根据后台返回的数据来渲染页面所能看到的页面。
2、用户可以直接在地址栏敲路由地址进去访问。此时,需要在路由里面设置路由守卫。
37.会话cookie与持久cookie的区别
(1)会话cookie:
是一种临时的cookie,它记录了用户访问站点时的设置和偏好,关闭浏览器,会话cookie就被删除了
(2)持久化cookie:存储在硬盘上,不同的操作系统,不同的浏览器存储的位置不一样,不管浏览器退出,或电脑重启,持久cookie都存在。持久cookie有过期时间。
38.Routerlink是什么?
锚链接
39.Route组件。
keepAlive和两个生命周期函数ditavied、active。
40、深拷贝和浅拷贝的应用场景
1、浅拷贝:从服务器fetch到数据之后我将其存放在store中,通过props传递给界面,然后我需要对这堆数据进行修改,那涉及到的修改就一定有保存和取消,所以我们需要将这堆数据拷贝到其它地方。
2:深拷贝:当你想使用某个对象的值,在修改时不想修改原对象,那么可以用深拷贝弄一个新的内存对象。像es6的新增方法都是深拷贝,所以推荐使用es6语法。
41、vuex的缺点?如何解决的
缺点:刷新浏览器,vuex中的state会重新变为初始状态
解决方法:
1.可以采用其他的存储方法,例如:sessionStorage、localStorage、cookies等。
2.也可以采用vuex和sessionStorage 结合的方式。
3.使用插件。
解决方案 使用插件 vuex-along ,vuex-persistedstate。
42、插件如何使用?
1、安装插件。
2、导入插件。
3、添加使用插件。
43、import和require的区别。
1、require 是赋值过程并且是运行时才执行,require可以理解为一个全局方法。是一个方法就意味着可以在任何地方执行。
本质上是将要导出的对象赋值给module这个的对象的export属性,在其他文件中通过require这个方法访问该属性
2、import 是解构过程并且是编译时执行,import必须写在文件的顶部。
导出的对象必须与模块中的值一一对应,换一种说法就是导出的对象与整个模块进行结构赋值。
3、require的性能相对于import稍低,因为require是在运行时才引入模块并且还赋值给某个变量,而import只需要依据import中的接口在编译时引入指定模块所以性能稍高
在commom.js 中module.export 之后 导出的值就不能再变化,但是在es6的export中是可以的。
44、扁平数组转为树形结构
1.使用递归。
2.双层for循环。
45、for循环和forEach的区别
1、for循环可以修改和删除集合中的元素,而forEach不能。
2.for循环可以使用break和return跳出循环 而forEach不能。
3.for循环可以控制循环的起点。
46.watch首次监听不到怎么办?
修改immediate方法 把false修改为true。