前端面试锦集第四期：讲好自己的故事

这里记录面试及工作中遇到的知识点及问题，问题没有顺序，想到哪写到哪，每周五发布。

封面图

面试只是起点，能力才是终局。

上周的周报生成器暂时就告一段落吧，最近也没时间去整理它。后续会修复相应的Bug，因为有很多想好的功能我还没加上去。

这几天一直在思考一个问题：我们应该具备一种能讲故事的能力，这种能力会在面试的时候起到很好的作用。

讲故事的能力

会讲故事，能讲故事，并不代表能把故事讲好。所以最近我一直在看《宰相刘罗锅》这部电视剧。

看一集，然后思考这一集都讲了哪些内容，然后试着回忆一下。然后试着讲给身边的人听。以此来锻炼自己讲故事的能力。

之所以提到这个讲故事的能力。是因为，从某些方面来讲，我们每次面试的时候，也可以理解为在给面试官讲我们自己的故事。

我做了哪些事儿，这些事儿是基于怎么样的背景，我通过某种途径的努力，最后得出了一个什么样的结果。

仔细想想，确实是在讲一个关于自己的故事。

除了自己的故事，当然还有技术上的故事。技术上的故事，就需要看看我们对某些技术的理解程度了。

单纯的面试题，我们可以死记硬背。但是基于这项技术我们可以做哪些事儿？能如何扩展？就真的需要我们去花时间更加深刻的理解这些技术点。

比如我们接下来试着聊一下vue相关的内容，谈到Vue，我们能够想到哪些内容呢？我们不应该只想到那些博客文章里提到的零散的面试题，而是应该逐渐的将其系统化，深刻的理解到我们的脑子里。

Vue相关的内容

下面这些内容，大概聊一下Vue相关的知识，不涉及大量代码，只谈理论，想到哪写到哪。

一图胜千言:

如果简单罗列Vue相关的技术点，那么我觉的上面的图足以覆盖绝大部分技术点了，当然了，我们不考虑特别细的技术点。

说白了就是四个文档。Vue官方文档，Vue-Router官方文档，Vuex官方文档和Vue-cli的文档。

Vue官方文档

先说Vue的官方文档。这个文档里都讲了哪些内容呢？简单罗列如下:

• 计算属性和侦听器
• class和Style绑定
• 条件渲染 v-if 和 v-show
• 列表渲染 v-for
  • key
  • 数组方法 push pop shift unshift splice sort reverse
• 事件处理 v-on
• 表单绑定 双向绑定 v-modal
• 组件
  • 定义组件 Vue.cmponent()
  • 数据传递 props
  • 监听子组件事件 $emit,v-modal
  • 内容插槽 slot
  • 动态组件
• 自定义事件 $(emit)
• 响应式原理
• 异步更新队列

然后你会发现，面试常问的问题都在里面。

1. computed 和 watch 的区别?
2. v-if 和 v-show 的区别?
3. key的作用?
4. 父子组价传参的方式?
5. 响应式原理?
6. 异步消息队列?

知道了这些，我们继续思考一个问题。文档里讲的这些内容里，哪些才是核心呢? 或者说你理解的Vue的核心是什么呢?

在我看来，如果把整个项目看成是一个Vue的实例，那么我们可以理解它是一个大的组件。组件中嵌套了很多个子组件。

组件是由元素组成的，元素是虚拟Dom创建的。所以Vue核心还是虚拟Dom。

从另外一方面考虑，大部分人平时写的基于Vue的项目，都是基于模板文件创建的。如下:

<template>
  <div>this is content to be render</div>
</template>
<script>
export default {
  data(){
    return {

    }
  },
  created(){

  },
  methods:{

  }
}
</script>
<style>
.demo{
  background:#ddd;
}
</style>

Vue会对这个模板进行三个操作：

• 解析并渲染html模板
• 解析并执行js
• 解析并渲染css

而这三个操作其实也是对虚拟dom的解析。并且双向绑定,props,computed,watcher等一系列的概念都是对虚拟Dom的解析中产生的。

而全局api如:el,emit ,remove,watch等，其实就是在vue的原型对象上挂载的一系列的方法而已。

再说Vue-Router。

Vue-Router官方文档

Vue-Router的文档非常简单，介绍了Vue-Router的使用方法。大致有以下内容：

• 动态路由
• 嵌套路由
• 命名视图
• 路由参数
• 编程导航
• 路由模式
• 路由守卫

其中动态路由,嵌套路由,编程导航等都是我们在项目里经常使用的内容。路由守卫大部分的时候用不用其实无关紧要。

我想说的是:命名视图这个内容大家用的应该非常少。但是这个内容我觉得应该会有很多场景以后会用到。

一个我们没有注意过的问题是:

Link 和Router-View 这连个组件其实是Vue-Router给我们封装的两个全局组件。

有兴趣的话可以去查看源码。其实就是用Vue.component()注册了两个全局组件。

这两个组件我觉的是Vue-Router的核心之一。

另外一个比较核心的技术点是：如何捕获参数。

通过this.route.params或this.route.query?

这只是表象。如果想真正弄明白这个问题，我觉我们至少需要搞明白下面这几个概念:

• router
• route
• matcher
• history

这些概念也需要我们自己去源码中寻找答案。

暂且我们只需要知道，我们项目里使用的路由，其实是VueRouter的一个实例对象，并且我们可以用这个对象的提供的api对这个路由进行扩展就可以了。

动态扩展路由，意为着我们可以做更多的事儿。比如我么可以整个微服务之类的，如果业务上需要的话。

接下来就到了Vuex。

Vuex

Vuex致力于解决两个问题:

• 多个视图依赖统一状态
• 不同视图需要改变同一状态

当然，解决这两个问题的方案有很多。比如：

• 全局变量
• 本地缓存

但是基于Vue的话，vuex还是最好的选择。

简单说下对几个概念的理解:

• state和module

可以把state理解为一个全局的对象，module可以将state拆分成不同的模块儿，模块儿通过module收集器（ModuleCollection）进行重组，module收集器是一个类，可以获取命名空间，注册和更新module。

• mapState

mapState的写法通常如下:

// mapState
  computed: mapState({
    products: state => state.products.all
  }),

从这个写法中，我们可以看出来，mapStated的主要作用是将state中的属性映射称为vue实例的属性，确切的说是computed属性。

mapActions,mapMutations,mapGetters和mapState的作用类似，mapActions将store中的actions中定义的action行为，映射为vue的方法，示例如下：

// store 的action
const actions = {
// addProductToCart
   addProductToCart ({ state, commit }, product) {
    commit('setCheckoutStatus', null)
    if (product.inventory > 0) {
      const cartItem = state.items.find(item => item.id === product.id)
      if (!cartItem) {
        commit('pushProductToCart', { id: product.id })
      } else {
        commit('incrementItemQuantity', cartItem)
      }
      // remove 1 item from stock
      commit('products/decrementProductInventory', { id: product.id }, { root: true })
    }
  }

}
// 组件中写法
  methods: mapActions('cart', [
    'addProductToCart'
  ]),

• mapGetters

个人对mapGetters的理解是，它的应用场景是将复杂的逻辑运算提到了store或者叫vuex中，从而避免了在页面组件中写过多的运算逻辑。

而事实上也确实如此：

// store中的getter
// getters
const getters = {
  cartProducts: (state, getters, rootState) => {
    return state.items.map(({ id, quantity }) => {
      const product = rootState.products.all.find(product => product.id === id)
      return {
        title: product.title,
        price: product.price,
        quantity
      }
    })
  },
}
// 组件中
 computed: {
    ...mapGetters('cart', {
      products: 'cartProducts',
    })
  },

下周接着聊吧，还有个cli...