Web + Vue 前端面试题

1，html怎么解析的？

  把html解析为dom树，使用css渲染dom，js操作dom。

2，window中的onload和jQ中的ready有什么区别？

a) window中的onload是在页面中的包括图片的所有元素加载玩之后才会执行，
   jQ中的$(document).ready()是dom加载完之后就可以执行，不必等所有元素执行完。
b) window中的onload如果有多个方法只会执行一次
   jQ中的$(document).ready()可以编写多个，并且可以之执行多次

3，jQ中让一个元素消失怎么实现？

a) dispaly:none
b) hide()
c) visibility:hidden
d) $("p").fadeOut()

4，ajax.get发送数据成功后会把请求的url和结果保存缓存中，当下一次请求时直接取出来，这是为了提高页面响应速度和用户体验，因为我们业务需要怎么解决缓存？

a) 在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“Cache-Control”,”no-cache”);
b) 在服务端加 header(“Cache-Control: no-cache, must-revalidate”);
c) 在ajax发送请求前加上 xmlHttpRequest.setRequestHeader(“If-Modified-Since”,”0″);
d) 在 Ajax 的 URL 参数后加上 "?fresh=" + Math.random(); //加随机数
e) 第五种方法和第四种类似，在 URL 参数后加上 "?timestamp=" + new Date().getTime();//加时间戳
f) 用POST替代GET：不推荐

5，vue-router第一次加载组件资源过多导致加载缓慢，如何解决？

vue-router 懒加载(按需加载)
非懒加载：component:index
懒加载：  component:resolve => require(['@/components/index'],resolve)

6，vue - webpack 中并没有scss，我们要在vue中使用sass需要怎么配置？

a) npm 安装 scss依赖包
b) npm i sass-loader node-sass -D
c) 在build文件夹下webpack.base.conf.js的rules中添加配置
{
    test:/\sass$/,
    loaders:['style','css','sass']
}
d) 在vue文件style里更改lang='scss'
e) 启动webpack

7，vue中的meta:{KeepAlive:true}

缓存，记录滚动条的位置

8，vue生命周期中那个钩子函数加载dom？那个挂载完之后？

beforeMount() 开始挂载
mounted()     挂载完成

9，v-once的作用？

只加载一次

10，computed，mothods，watch的区别？

computed是计算属性,有getter,setter属性,setter接受,getter返回
mothods是点击事件触发的,存放一下函数方法
watch是监听,有newQuestion, oldQuestion两个参数,一个新值,一个旧值

11，如何画圆？

用css border-radius 50%角度
css动画也可以画圆
canvas也可以具体可以去w3c看看

12，vue中怎么发送请求？

面试官想听到的是axios,也可以稍微提下vue-resource

13，v-if和v-for一起使用会发生什么？

会只执行v-for，v-for的优先级比v-if的优先级高，要想解决这个问题需要分开使用。

14，pc整屏滚动怎么实现？

window.scrollTop 等于 height

15，vue中的ref？

操作dom

16，判断js的数据类型？

tyepof，jQuery中的type   jQuery.type(value)

17,如何判断数组？

a) Array.isArray([])
b) var a = [];
typeof a === 'object' && !isNaN(a.length)
c) prototype.toString.call()//面试官就等你的这个回答

18,js中的事件循环机制？

js因为是单线程并发语言，js的主要用途是操作dom和用户交互，如果前一个任务耗时很长，后一个任务就需要一直等着。这就会导致IO操作（耗时但cpu闲置）时造成性能浪费的问题。
为了解决这一问题所以有了异步加载，如果有异步或者定时器任务，会把他挂在事件任务中，等到执行完同步任务再来执行事件任务中的事件。
摘自:https://baijiahao.baidu.com/s?id=1578420152041101657&wfr=spider&for=pc

19,闭包

闭包简单来说就函数嵌套函数，保存变量不被垃圾回收机制回收。
在一个函数里面嵌套另一个函数，被嵌套的那个函数的作用域是一个闭包。
作用：创建私有变量，减少全局变量，防止变量名污染。可以操作外部作用域的变量，变量不会被浏览器回收，保存变量的值。
复制代码

20，垃圾回收机制

我们每创建一个对象，字符串都会占用一部分内存，用过之后很多都不会再用了，所以会造成内存泄漏，在c，c++都是手动释放，幸运的是我们js有自动管理。
工作原理
当变量进入环境时(例如在函数中声明一个变量)，将这个变量标记为“进入环境”，当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。
如何避免内存泄漏
减少不必要的全局变量，使用严格模式避免意外创建全局变量。
在你使用完数据后，及时解除引用(闭包中的变量，dom引用，定时器清除)。
组织好你的逻辑，避免死循环等造成浏览器卡顿，崩溃的问题。
但是使用闭包也会造成内存泄漏，所以当我们不用的时候可以手动释放。
obj = null；

摘自一篇博客，写的很好详情请转：https://juejin.im/post/5b40581e5188251ac446c716

21，vue中的双向绑定实现原理？

Object.defineProperty()
摘自一篇博客，写的很好详情请转：https://juejin.im/post/5b2df500f265da597c772b0d

22，let与const的区别？

都是不可重复声明，不存在变量提升，有暂时性死区，都是块级作用域。
let不存在变量提升，在变量之前使用会报错。
const必须在声明的时候赋值，不然就会报错。const声明的常量不能更改。

23，css的优先级？

!important是最高的，下来行内style，id，class

24，call和apply的区别的？

每个function都有call和apply，他们可以继承实例
call()和apply()第一个参数将用作函数内 this 的值,用于改变函数的this指向。call和apply的区别在于call()方法接受逗号分隔的参数作为后面的参数，apply()接受一个参数数组作为后面的参数。

25，Vuex的工作流程，以及它的作用，使用场景。

a) 在vue组件里面，通过dispatch来触发actions提交修改数据的操作。
b) 然后再通过actions的commit来触发mutations来修改数据。
c) mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
d) 最后由store触发每一个调用它的组件的更新
Vuex的作用：项目数据状态的集中管理，复杂组件(如兄弟组件、远房亲戚组件)的数据通信问题。