初级前端的面试之路（一）

如下若有不对或错误的地方，欢迎各位大佬指点，谢谢！

CSS相关

如何让子元素在父元素中垂直居中

1、已知子元素的高度和宽度

• 经过定位和设置子元素负边距实现

.parent{
  width:600px;
  height:600px;
	position:relative;
}
.children{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-right:-50px;
}
复制代码

• 经过定位和 margin:auto 实现

.parent {
  width: 500px;
  height: 500px;
  background: black;
	position: relative;
}

.children {
  width: 200px;
  height: 200px;
  background: white;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
复制代码

2、不知子元素的高度和宽度

1. 经过定位和设置 transform:translate 属性实现

.parent{
  width:600px;
  height:600px;
	position:relative;
}
.children{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-right:-50px;
}
复制代码

2. 使用 flex 弹性盒实现

.parent{
	width:500px;
	height:500px;
	display:flex;
	justify-content:center;
	align-items:center;
}
复制代码

JavaScript 相关

JS 中有哪些基本类型

number、string、boolean、null、undefined、symbol

谈一谈经常使用的循环遍历方法

1. for 循环

这个算是最基础的循环遍历方法了

2. forEach

forEach 循环中，能够对每一次元素采起操做，没有返回值。另外，该方法在全部元素调用完毕以前不能中止，没有 break 语句。

3. map

该方法返回一个新数组，数组中的元素为原数组内元素调用函数处理后的值

4. filter

一样返回一个新数组，会经过函数调用过滤掉元素，返回符合规则的元素组成的新数组

面试时答出了这四个，固然还有 some、every、reduce 等等...最后面试官又补充了 find 方法：

find（） 方法返回数组中知足提供测试函数的第一个元素的值，举个🌰

let array = [1, 3, 4, 5, 7, 9, 8]

let findNum = array.find(val => {
  return val % 2 == 0
})
console.log(findNum)
// --> 4
复制代码

VUE相关

Vue有哪些生命周期

1. beforeCreact
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. update
7. beforeDestory
8. destoryed

还有当使用<keep-alive>的时候，配合使用的：

9. activated
10. deactivated

你以为数据请求放在那个生命周期里更好？

我更偏向于放在 created 里面，由于在这个时期，Vue 中的 Data 已经生成，若是咱们请求过来的数据是 Data 里面须要的数据，须要在渲染页面以前就拿到数据，那么在 created 里面获取最好。

可是若是咱们须要在页面渲染完成以后，能够放在 mounted 里面

可是若是数据对 DOM 属性有更改的话，放在 mounted 里面，可能会致使闪屏问题

（期待大佬们更多更准确的回答）

v-if 和 v-show 的区别

v-if 是真正的条件渲染，经过判断是否知足条件，决定是否渲染 DOM 节点

而 v-show 的状况下，始终都会渲染该 DOM 节点，仅是经过修改 display 是否为 none 决定是否显示该节点

Vue 组件之间通讯都有哪些方式

父子组件

父子组件能够经过 props 传递数据给子组件，子组件能够经过 emit 发送事件传递数据给父组件。要注意的是，子组件不能直接修改 props ，必须经过发送事件去告知父组件修改数据

咱们还能够经过 $parent 或者 $children 这两个对象来访问父组件或者子组件实例中的方法和数据

兄弟组件

最简单的兄弟组件之间通讯能够经过查找父组件中的子组件，经过 this.$parent.chidren，而后在 $children中能够经过组件的 name 查询到须要的组件实例，从而去获取相关的数据，进行通讯

跨组件通讯

1. 可使用 provider/ inject

// parent
export default {
  provide:{
    data:"this is parent's data"
  }
}

// child
export default {
  inject:['data']
}
复制代码

2. 可使用 Event Bus

我所理解的 Event Bus 就是建立一个公共的 Vue 实例，全部组件均可以去调用这个实例上的事件触发（$emit 和 $on），从而实现通讯和参数的传递

首先，咱们须要建立时间总线并将其导出，便于以后咱们有须要用到总线的模块里进行导入并实施监听它。建立总线有两种方式：

// 1:
import Vue fome ‘vue’
export const EventBus = new Vue()

// 2:
Vue.prototype.$EventBus = new Vue()
复制代码

而后咱们须要在用到总线的组件中将其引入

import EventBus from ‘你的 Event Bus 的路径’
复制代码

在发送数据的一方，使用 $emit 方法发送数据

method:{
  sendMessage:function(){
    EventBus.$emit("transfer",data)
  }
}
复制代码

上述代码中，经过调用所导入的 EventBus 实例上的$emit方法，去发送数据。（第一个参数为事件名，咱们以后要经过这个事件名去接收所传递的数据，第二个参数也就是代码中的 data 是你要传递的数据）

在接收数据的一方，使用 $on 监听事件，获取数据

mounted(){
  EventBus.$on("transfer",(data) => {
    console.log(data)
  })
}
复制代码

3. Vuex

这两天的面试中，都被问到了 Vuex...

我所理解的 Vuex 就像是一个房顶的“储藏室”，你们伙（各组件）能够从这个仓库里拿取一些东西（state），也能够往这个仓库放一些东西（修改 state）

这是官方文档给的说明图，在Vuex里，若是想要修改某一个 state，咱们须要在组件里 dispatch 一个 Vuex 中的 ation，每个 action 都会去 comiit 一个 mutation,从而去修改 state。

这是较为粗鲁的回答吧，虽然我在面试的时候都是这样回答相似 “怎么用Vuex” 这类的问题。在面试中还遇到了以下问题：

• 为何不能直接去 commit 一个 mutation？

我翻阅了官方文档，给出的解释是：

再次强调，咱们经过提交 mutation 的方式，而非直接改变 store.state.count，是由于咱们想要更明确地追踪到状态的变化。这个简单的约定可以让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让咱们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，咱们甚至能够实现如时间穿梭般的调试体验。 因为 store 中的状态是响应式的，在组件中调用 store 中的状态简单到仅须要在计算属性中返回便可。触发变化也仅仅是在组件的 methods 中提交 mutations。

我所理解的就是，因为 vue 倡导响应式的数据，直接去 commit 一个 mutation 的时候，至关于咱们直接去修改 store 里面的 state，Vuex 追踪不到数据的变化。而咱们知道每个 mutation 都有一个事件类型（type）和一个回调函数，咱们每次都须要以相对应的 type 去触发某个回调函数，这样 Vuex 能够追踪到你的每一次操做，保证数据的响应式。

• action 和 mutation 有什么区别？

这个问题回答的比较失败，由于忘记了一些概念和使用场景，我当时的回答过于白话，我说：action 比如告诉 Vuex 我要作什么事情，而 mutation 是去执行怎么作...

我以为比较合理的回答是：

1. action 内能够执行异步操做，而 mutation 必须是同步的
2. action 更专一于业务代码的实现，mutation 专一于修改 state，理论上是惟一途径

Nuxt 相关

以前在上家公司接触过一小段时间的 Nuxt，因为时间较短，了解和掌握的也不是太多,回答的都不怎么好，看来须要恶补一下官方文档了...

Nuxt 怎么获取服务器端数据

这道题我理解错误了，而且对于知识也有点淡忘...，当时回答了利用 axios（这还用我说？哈哈）

面试官想听到的答案是：asyncData

你可能想要在服务器端获取并渲染数据。Nuxt.js添加了asyncData方法使得你可以在渲染组件以前异步获取数据。

该方法会在组件（页面组件）加载以前被调用，能够在服务器端或路由更新前被调用

还有 fetch！

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法相似，不一样的是它不会设置组件的数据。

export default {
  async fetch ({ store, params }) {
    let { data } = await axios.get('http://my-api/stars')
    store.commit('setStars', data)
  }
}
复制代码

Nuxt怎么作 SEO 优化

咱们能够经过在 nuxt.config.js 文件中配置全局的 head ，也能够在单独的页面中单独配置。在 head 里面咱们能够配置咱们页面的 title 和 meta 标签，结合各大搜索引擎的规则，从而实现 SEO 优化。

head(){
  return {
    title:'......',
    meta:[
      {
        xxx:'...'
        ...
      }
    ]
  }
}
复制代码

经过投简历和两场面试能够感觉到，北京目前对于应届生来讲的确不是很友好，可是既来之，则安之，不要去抱怨，作好本身吧！加油！加油！加油ヾ(◍°∇°◍)ﾉﾞ！