前端面试常见题(持续更新)

一、Vue 相关问题

1、如何理解Vue？

vue是一套构建用户界面的渐进式框架，核心是数据模型与组件化设计，是一款MVVM框架，基于双向数据绑定，简洁轻量。兼容IE可以添加 babel-polyfill 插件。

  • babel-polyfuu 插件的使用方法：在 build 文件里的 webpack.base.conf.js 文件里配置，然后在 main.js 文件里引入：
// webpack.base.conf.js:
module.exports = {
  entry: {
    app: ['babel-polyfill', './src/main.js']
  },
}

// main.js:
import 'babel-polyfill'
  • promise 问题，axios 不兼容 ie 的使用方法：
import promise from 'es6-promise';
promise.polyfill();
  • URLSearchParams 未定义的问题，IE9不支持URLSearchParams：
// 下载 qs
npm install qs

// 在 main.js 中引入
import qs from 'qs';
2、什么是MVVM开发模式？

M是Model代表数据模型，数据和业务逻辑都在Model层；V是View代表UI视图，负责数据的展示；VM是ViewModel负责监听Model中的数据变化并且对View的视图更新，处理交互操作。

3、简述Vue的响应式原理。

当一个vue实例被创建时，vue会遍历 data 中的属性，用 Object.defineProperty 将它们转化为 getter/setter 并在内部追踪相关依赖，在属性被访问和修改时被通知。每个组件实例都有 watcher，它会在组件渲染的过程中把属性记录为依赖，当依赖项的 setter 被调用的时候，会通知关联组件更新。

4、简述Vue的双向数据绑定原理。

vue通过 Object.defineProperty() 做数据劫持，重写 data 的 getter/setter ，在数据变动时触发 Watcher，改变虚拟dom中的数据更新dom树，完成双向数据绑定。

5、简述Vue组件之间的数据传递。

  • 父组件向子组件传递数据：
    子组件用 props 接收父组件传来的数据，在父组件中注册子组件并赋值给声明的属性。

  • 子组件向父组件传递数据：
    子组件用 $emit 触发一个自定义函数并传递参数，在父组件中注册子组件并绑定方法接收数据。

  • 兄弟组件之间传递数据：
    在简单的场景下，可以使用一个空的vue实例 Bus作为中央事件总线；在复杂的场景下，使用vuex。

6、Vue中如何监听某个属性值的变化？

比如现在需要监听data中，obj.a 的变化：

  • 用 watch 监听
watch: {
  obj: {
    handler (newValue, oldValue) {
      console.log('obj changed')
    },
    deep: true
  }
}

deep 属性表示深层遍历，这么写会监听 obj 所有属性变化，并不是我们想要的，所以需要修改一下：

watch: {
  obj.a: {
    handler (newValue, oldValue) {
      console.log('obj.a changed')
    }
  }
}
  • 用 computed 实现
computed: {
  a () {
    return this.obj.a
  }
}
7、Vue中如何给 data 中的对象添加一个新的属性？
this.$set(this.obj, 'b', 'obj.b')
8、delete 和 Vue.delete 删除数组有什么区别？
  • delete被删除的元素只是变成了 empty 或 undefined 其他元素的键值都不变。
let a = [1, 2, 3, 4]
delete a[1]
console.log(a)
  • Vue.delete直接删除了数组，改变了数组原来的键值。
let b = [1, 2, 3, 4]
this.$delete(b, 1)
console.log(b)
9、简述Vue的生命周期。

  • beforeCreate：完成实例初始化，挂载没开始，DOM没有初始化，loading 事件可以放在这里。

  • created：实例创建完成，完成数据初始化，未挂载DOM不能访问 el，若要访问DOM一定要放在 Vue.nextTick() 的回调函数中，$ref 为空数组，可以对 data 数据进行操作但请求不宜过多避免白屏时间太长，loading 结束放在这里。

  • beforeMount：数据初始化完成，找到对应的 template，并编译成 render 函数。

  • mounted：完成挂载DOM和渲染，完成双向绑定，可发起后端请求，对DOM进行操作。

  • beforeUpdate：数据更新前触发，可在更新前访问现有的DOM，如手动移除事件监听器。

  • updated：数据更新完成，不要随意在这里操作数据，会陷入死循环。

  • activated：keep-alive 组件激活时调用（用来缓存组件状态），这个时候 created 钩子就不会被重复调用了，如果子组件需要在每次加载的时候进行某些操作，可以使用 activated 钩子触发。

  • deactivated：keep-alive 组件停用时调用。

  • beforeDestroy：实例销毁之前调用，但实例仍然可用，可以在这里销毁定时器、解绑全局时间、销毁插件对象。

  • destroyed：实例销毁后调用，Vue 实例指示的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

10、<keep-alive></keep-alive>的作用是什么？

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。
比如有一个列表和一个详情页，那么用户会经常打开详情=>返回列表=>打开详情…这样列表和详情都是一个频率很高的页面，那么就可以对列表组件使用<keep-alive></keep-alive>进行缓存，用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染，可以减轻服务器压力，提高性能。

11、Vue有哪些修饰符？

事件修饰符：stop（阻止冒泡）、prevent（提交事件不再重载页面）、once、left、right
键盘修饰符：up、down、enter、space
表单修饰符：number（输入字符串转为有效的数字）、trim（输入首尾空格过滤）、lazy（取代input监听change时间）

12、Vue中 $mount 与 el 区别？

两者在使用中没有什么区别，都是将实例化后的vue挂载到指定的DOM元素中，如果指定了 el 则渲染在 el 对应的DOM中，没有指定 el 就用 $mount 手动挂载。

13、Vue中 key 值和 is 的作用？

使用 key，vue会基于 key 的变化重新排列元素，并且移出 key 不存在的元素，可以做优化处理；is 可以扩展原生 html 元素，也可以绑定动态组件。

14、组件中 data 为什么是函数？

组件是用来复用的，Js 中对象是引用关系，作用域没有隔离，而vue的实例是不会被复用的，因此不存在引用对象的问题。

15、什么是单向数据流？

单向数据流出现在组件通信，数据从父级流向子级，数据本身还是父级的，如果操作子级要改变父级的数据，只能通过子级告诉父级要操作哪个数据，然后父级修改数据，再传给子级。

16、Vue中 $router 和 $route 的区别？

  • router 是 VueRouter 的一个实例，相当于一个全局的路由器对象，包含了所有的路由、路由的关键属性及方法，经常用的跳转链接 $router.push({path:'/login',query:{name:'userName'}})

  • route 是一个跳转的路由对象（局部变量），每一个路由都有一个自己的 route，可以获取本次路由跳转的 name、path、params、query 等参数，用法 let query=this.$route.query

17、vue-router 中 query 和 params 的区别？

两者都是在路由中传参，query 用 path 引入，参数在地址栏中显示；params 用 name 传递，参数不会在地址栏中显示。

18、vue-router有哪几种导航钩子？
  • 第一种：全局导航钩子（全局守卫）：router.beforeEach(to,from,next)，跳转前进行判断拦截；
  • 第 二种：全局解析守卫：router.beforeResolve，在导航被确认前，所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用；
  • 第三种：单独路由独享的守卫：beforeEnter，在路由配置时定义，与全局守卫的方法是一样的。
  • 第四种：组件内的守卫。直接在路由组件内定义守卫，
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
   // 在当前路由改变，但是该组件被复用时调用
   // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
   // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
   // 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
   // 导航离开该组件的对应路由时调用
   // 可以访问组件实例 `this`
}
19、vue.cli 中怎样使用自定义的组件
  • 在 components 目录新建组件页面
  • 在需要用的页面中导入
  • 注入到vue的子组件的 components 属性上面
  • 在视图中使用
20、简书Vue中的 slot 插槽。

插槽是Vue实现内容分发的API，将插槽元素作为分发内容的出口（子组件中给父组件提供一个占位符slot，父组件可以在组件标签中放任何内容）。

  • 匿名插槽：没有插槽时，在组件标签写入内容是不起作用的，当在组件中声明了slot元素后，在组件标签中写入内容起了作用。
没有使用slot时
使用了slot

  • 具名插槽：就是在父组件中添加一个 slot = '自定义名字' 的属性，在子组件中的 slot 元素里面添加 name = '自定义名字' 即可。

  • 作用域插槽：就是组件上的属性，可以在组件元素内使用。

例一
例二
例三
21、如何理解Vue中的 Render 渲染函数？

Vue一般使用 template 来创建 html，有的时候需要使用javascript 来创建 html，这时候我们需要使用 render 函数，render 函数 return 一个 createElement 组件中的子元素存储在组件实列中，createElement 返回的是包含的信息会告诉Vue页面上需要渲染什么样的节点。我们称这样的节点为虚拟DOM

22、如何解决在加载页面时出现的闪烁问题？

使用 v-cloak。
出现闪烁的原因可能有二：

  • 加载时遇到 {{value.name}} 闪烁
  • 加载时遇到一个空盒子里边什么也没有 <p v-html="value.name"></p>

解决方法：

<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

// css 中要添加
[v-cloak] {
    display: none;
}

如果还是闪烁，那可能是 v-cloak 的 display 属性被层级更高的给覆盖掉了；或者 v-cloak 的样式放在 @import 引入的css文件中不起作用，可以放在 link 引入的 css 文件里或者内联样式中。

23、vuex是什么？

是一个专为vue应用程序开发的状态管理模式。

24、vuex有哪几种状态和属性？
  • state：存储数据，在根实例中注册了 store 后，用 this.$store.state 来访问；
  • getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，而且只有当它的依赖值发生了改变才会被重新计算；
  • mutation：更改 Vuex 的 store 中的状态唯一方法是提交 mutation；
  • action：包含任意异步操作，通过提交 mutation 间接更变状态；
  • module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

vuex的流程：
页面通过 mapAction 异步提交事件到 action；action 通过 commit 把对应参数同步提交到 mutation；mutation 会修改 state 中对于的值。；最后通过 getter 把对应值抛出去，在页面的计算属性中，通过 mapGetter 动态获取 stat e中的值。

二、javaScript 和 Jquery 相关问题

1、javascript 的数据类型有哪些？
  • 基本数据类型：number、boolean、string、array、null、undefined
  • 复合型数据类型：object、function、array
2、什么是window对象？什么是document对象？
  • window 对象是指浏览器打开的窗口；
  • document 对象是 HTML 文档对象的一个只读引用，window 对象的一个属性。
3、call 和 apply 的区别？

call 与 apply 的相同点：

  • 方法功能是一样的，都是调用一个对象的一个方法，用另一个对象替换当前对象；
  • 第一个参数的作用是一样的；

call 与 apply 的不同点：两者传入的列表形式不一样

  • call 可以传入多个参数；
  • apply 只能传入两个参数，所以其第二个参数往往是作为数组形式传入。
4、document.load 和 document.ready 的区别？

document.load 是当页面全部内容都加载完再执行；
document.ready 是当页面的DOM数渲染完就执行；

5、JS如何阻止事件冒泡和阻止默认事件？
  • 阻止事件冒泡：e.stopPropagation()
  • 阻止默认事件：e.preventDefault()
6、如何将 arguments 转化为数组？
// 方法一：
function toArr1 () {
  var arr = [];
  for (var i = 0; i < arguments.length; i ++){
    arr.push(arguments[i]);
  }
return arr;
}
console.log(toArr1('你好', 100)); //  ["你好", 100]

// 方法二：
function toArr2 () {
  return [].slice.call(arguments);
}
console.log(toArr2('你好', 200));  //  ["你好", 200]

// 方法三：
function toArr3 () {
  return Array.prototype.slice.apply(arguments);
}
console.log(toArr3('你好', 300));  //  ["你好", 300]

// 方法四：es6
function toArr4 () {
  return Array.from(arguments);
}
console.log(toArr4('你好', 400));  //  ["你好", 400]

// 方法五：es6扩展运算符
function toArr5 () {
  return [...arguments];
}
console.log(toArr5('你好', 500));  //  ["你好", 500]
7、列举js跨域的方法，并对其原理加以解释？

同源策略：就是浏览器为了保证用户的信息安全，防止恶意网站窃取数据，禁止不同域之间的JS进行交互。
同源策略限制了以下行为：
① Cookie、LocalStorage 和 IndexDB 无法读取；
② DOM 无法获得；
③ AJAX 请求不能发送。

  • jsonp 跨域：插入 script 标签，引入一个js文件，当js文件加载成功后，会执行callback对应的方法，并把我们需要的 jsonp 数据作为参数传入（需要后端配合）。
// 方法一：在 aja x函数中设置 dataType 为 'jsonp'
$.ajax({
  dataType: 'jsonp',
  url: 'http://www.a.com/user?id=123',
  success: function (data) {
    // 处理data数据
  }
});

// 方法二：用 getJSON 来实现，只要在地址中加上 callback=? 参数即可
$.getJSON('http://www.a.com/user?id=123&callback=?', function (data) {
  // 处理data数据
});
  • 跨域资源共享 CORS：基本思想就是使用自定义的HTTP头让浏览器与服务器进行沟通，从而决定请求或响应是成功还是失败；服务器端对于CORS的支持，主要是通过设置 Access-Control-Allow-Origin 来进行的，如果浏览器检测到相应的设置，就可以允许 Ajax 进行跨域的访问。
// 指定允许其他域名访问
Access-Control-Allow-Origin:*
// 响应类型
Access-Control-Allow-Methods:GET,POST
// 响应头设置
Access-Control-Allow-Headers:x-requested-with,content-type

  • window.name：window 对象有个 name 属性，在一个窗口的生命周期内，窗口载入的所有页面无论是否同源都共享一个 window.name 并且都有读写的权限，name 的值只能是字符串的形式。

  • window.postMessage：H5为了解决跨域问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging），这个API为 window 对象新增了一个 window.postMessage 方法，允许跨窗口通信，不论这两个窗口是否同源；有两个参数，第一个参数是要发送的数据，第二个参数是接收消息的域，用 onMessage 接收。

  • document.domain：两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置 document.domain 共享 Cookie 或者处理 iframe。

​document.domain = 'example.com';
// 现在，A网页通过脚本设置一个 Cookie
document.cookie = "test1=hello";
// B网页就可以读到这个 Cookie
var allCookie = document.cookie;
  • WebSocket：是一种浏览器 API，在js创建了 websocket 之后，会有一个HTTP请求发送到浏览器以发起连接，在取得服务器响应后，建立的连接会使用HTTP协议交换为websocket协议，只有在支持 websocket 协议的服务器上才能正常工作。
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
    var data = event.data;
}
8、排序
// 方法一:
function fnSort1 (arr) {
  if (arr.length <= 1) {
    return arr;
  }
  var pivotIndex = Math.floor(arr.length / 2);
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [], right = [];
  for (var i = 0; i < arr.length; i++) {
     if (arr[i] <= pivot) {
        left.push(arr[i]); 
     } else {
        right.push(arr[i]);
     }
  }
  return sort(left).concat([pivot], sort(right));
}

// 方法二：冒泡排序
function fnSort2 (arr) {
  for (var i = 0; i < arr.length - 1; i++) {
    for (var j = 0; j < arr.length - 1 - i; j++) {
      if (arr[j] > arr[j + 1]) {
        var temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}
9、去重
// 方法一：
function deRepet1 (arr) {
  arr.sort();
  for (var i = 0; i < arr.length-1; i > 0; i--) {
    if (arr[i] == arr[i - 1]) {
      arr.splice(i, 1);
    }
  }
  return arr;
}

// 方法二：es6
function deReprt2 (arr) {
    return Array.from(new Set(arr));
}

// 方法三：
function deRepet3 (arr) {
  var newArr = [];
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

// 方法四：双重遍历
function deRepet4 (arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

// 方法五：for...of
function deRepet5 (arr) {
  var result = [],obj = {};
  for (var i of arr) {
    if (!obj[i]) {
      result.push(arr[i]);
      obj[i] = 1;
    }
  }
  return return;
}
10、Session 和 Cookie 的区别？
  • cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
  • cookie 不是很安全，别人可以分析存放在本地的 cookie 并进行 cookie 欺骗，考虑到安全应当使用 session。
  • session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用 cookie。
  • 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个 cookie。
  • 可以考虑将登陆信息等重要信息存放为 session，其他信息如果需要保留，可以放在 cookie 中。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342

推荐阅读更多精彩内容

  • 前端Vue面试题笔试题
    前言 接上篇前端Js笔试题面试题，收集整理Vue相关的面试题，供自己现在和以后学习和面试，也希望能对点进来的小伙伴...
    蛙哇阅读 2,558评论 0赞 10
  • Vue笔记
    VUE介绍 Vue的特点构建用户界面，只关注View层简单易学，简洁、轻量、快速渐进式框架 框架VS库库，是一封装...
    多多酱_DuoDuo_阅读 2,684评论 1赞 17
  • Web前端面试题
    HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？ *HTML5 现...
    小程要谦虚阅读 755评论 1赞 8
  • 再读 Vue.js 文档
    主要还是自己看的，所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/，类似于 vie...
    Leonzai阅读 3,324评论 0赞 25
  • 我们一起学英语吧
    学习英语很多年了，一直没有突破到能说会道的水平。近期一直又在学习，这次不同的是学习的目的不再是应对考试了，而是真心...
    地岚阅读 350评论 0赞 1