本文汇总了前端开发岗位面试中的高频知识点，包括 JavaScript 核心机制、Vue.js 框架原理、DOM 操作与跨域处理等内容，帮助求职者系统复习和查漏补缺。

JS

如何理解 JS 中的this关键字？

  1. this总是指向函数的直接调用者（而非间接调用者）
  2. 如果有new关键字，this指向new出来的那个对象
  3. 在事件中，this指向目标元素，特殊的是IE的attachEvent中的this总是指向全局对象window。

什么是window对象? 什么是document对象?

window对象代表浏览器中打开的一个窗口。document对象代表整个html文档。实际上，document对象是window对象的一个属性。

[“1”, “2”, “3”].map(parseInt) 答案是多少？

[1,NaN,NaN]

数组对象有哪些原生方法，列举一下

pop、push、shift、unshift、splice、reverse、sort、concat、join、slice、toString、indexOf、lastIndexOf、reduce、reduceRight
forEach、map、filter、every、some

DOM操作

（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
getElementById() //通过元素Id，唯一性

什么是跨域？

要明白什么是跨域之前，首先要明白什么是同源策略？

同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同源呢？

如果协议，端口（如果指定了）和主机对于两个页面是相同的，则两个页面具有相同的源，也就是同源。也就是说，要同时满足以下3个条件，才能叫同源：

  1. 协议相同
  2. 端口相同
  3. 主机相同

举个例子就一目了然了：

我们来看下面的页面是否与 http://store.company.com/dir/index.html 是同源的？

  1. http://store.company.com/dir/index2.html 同源
  2. http://store.company.com/dir2/index3.html 同源 虽然在不同文件夹下
  3. https://store.company.com/secure.html 不同源 不同的协议(https)
  4. http://store.company.com:81/dir/index.html 不同源 不同的端口(81)
  5. http://news.company.com/dir/other.html 不同源 不同的主机(news)

所以当面对跨域问题的时候，有什么解决方案呢？

简单介绍下flex布局

Flex 布局语法教程

Vue

你用哪个指令遍历对象的属性？

要遍历对象或数组，可以使用 v-for

如何在输入框和数据属性之间实现双向数据绑定？

要实现双向数据绑定，可以使用 v-model 指令。 v-model 指令主要是语法糖：

1
<input type="text" :value="nameInput" @keyup="nameInput = $event.target.value">

你如何捕获元素上的点击事件？

可以使用 v-on:click 指令捕获 Click 事件。该指令也可以用缩写符号 @click 表示

什么是动态 prop？

当使用 v-bind 指令为 prop 分配值作为绑定到属性的函数时，被称为动态 prop。例如以下组件的 tweet 属性绑定到名为tweetText的数据属性。这与静态硬编码值相反。这种绑定始终是单向的，这意味着数据可以从父组件流到子组件，而绝不会反过来。

1
<TweetBox :tweet=”tweetText”>

v-show 指令的用途是什么？

v-show 指令允许有条件地显示元素。在下面的代码中，仅当 isDisplayed 数据属性为 true 时，才会显示该元素。

使用 v-show 指令时，可使用 CSS 的 display 属性切换元素的可见性。

v-show 与 v-if 指令有何不同？

v-show 和 v-if 都用于有条件地显示元素，而后者提供了条件渲染的真正实现。 v-show 只需切换 CSS 的 display 属性即可显示或隐藏元素，而 v-if 指令可创建或销毁组件。每次显示状态更改时，代价通常会更大。

另一方面，v-show 成本较低，因为它仅切换元素的CSS显示属性。所以如果必须经常切换元素，则 v-show 会提供比 v-if 更好，更优化的结果。

就加载元素的初始渲染成本而言，v-if 不会渲染最初隐藏的元素的节点，而 v-show 会渲染其 CSS display 属性被设置为 none 的元素。

什么是过滤器？

过滤器是在 Vue 程序中实现自定义文本格式的一种非常简单的方法。它们就像可以在表达式中通过管道传递（使用管道字符）以取得结果的运算符。下面是一个可以反转文本字符串的过滤器示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">{{ title | reverseText }}</div>
App
new Vue({
    el: '#app',
    data: {
      title: 'This is a title'
    },
    filters: {
      reverseText(text) {
        return text.split('').reverse().join('');
      }
    }
});

Vue.js 中的指令是什么？

指令是一系列特殊属性，你可以通过将其添加到模板 HTML 标记中来赋予它们特殊的响应功能。指令允许模板中的元素使用数据属性、方法、计算或监视的属性和内联表达式根据定义的逻辑对更改做出反应。例如以下代码使用 v-on 指令在组件上实现 click 事件侦听器。

指令以 v- 开头来指示 Vue 特定的属性。此规则的例外是 v-on 和 v-bind 的简写形式。@,:

如何确保在单文件组件中定义的 CSS 样式仅应用于该组件，而不被用于其他组件？

这可以通过样式标签上的 scoped 属性来实现。在内部 Vue 使用 PostCSS 插件为所有样式元素分配唯一的数据属性，然后使样式针对这些唯一的元素。举个例子：

1
2
3
4
5
6
7
8
<template>
    <div class=”title”>This is a title</div>
</template>
<style scoped>
    .title {
        font-family: sans-serif;
        font-size: 20px;
</style>

什么是生命周期hook？列出一些生命周期hook。

Vue 实例（组件）从其初始化到销毁和删除都经历生命周期。在整个过程中，Vue 允许开发人员运行自定义函数的几个阶段。这些函数称为生命周期 hook。以下是一些生命周期 hook 的列表：

  • created
  • mounted
  • updated
  • destroyed

什么是插槽（slot）？

插槽允许你定义可以封装和接受子 DOM 元素的元素。组件模板中的 </ slot> 元素作为通过组件标签捕获的所有DOM元素的出口。这是一个例子：

Post.vue |实现插槽的组件

1
2
3
4
5
6
7
8
9
<template>
 <div class="hello">
   <h3 class="title">{{title}}</h3>
   <div class="content">
     <slot></slot>
   </div>
 </div>
</template>

如何从子组件发出自定义事件？

可以用 $emit(‘event-name’, eventPayload)发出自定义事件。然后可以像其他事件一样，用 v-on 指令在父组件上拦截。

VueRouter 传递参数

1
2
$route.push({name: 'name', query: {id: 1}})
$route.push({name: 'name', params: {id: 1}})