年后想跳槽的，要抓紧时间补补了！前端面试干货——Vue

年底了，有的盆友可能会考虑跳槽，从今天起，每天更新一些面试题，也是考察自己是否对这些知识点熟练于心。
糖糖会坚持更新，若有遗漏知识点，后续会补充。如果有不对的地方，欢迎朋友们指出。

“形象走在能力前面”

无论你今年几岁，只要你迈入职场，建议去准备一套正装。在外形上要职业化、专业化。

女生，化淡妆，保证自己的气色要活力满满。男生，要干净整洁，有精神。

“态度决定一切”

前端知识点多如牛毛，如果真的是面试，题海深深，你怎么知道问你什么？如果你跟背书一样，十分机械地回答，也无法得到面试官的认可。
如果问到不会的，也不会害怕，毕竟知识点那么多，卡壳很正常，但你要妥善解决。

始终呈现一个自信的、积极的态度，百分之八十的公司或者企业更看重的是你的工作态度和忠诚度。

“知己知彼百战百胜”

一般面试会问什么？关心什么？
人事关心你的生活状态是否符合工作要求。
项目经理关心你的技术是否达标。
面试提问会涉及模块：

个人介绍（含离职原因）、项目案例、主流框架、基础知识点。

建议对自己擅长的模块展开回答，把一个面试题回答透，比你没有目标的背题有用。

image.png

面试干货——能力和技术十分重要：

Vue 的优缺点

优点：
创建单页面应用的轻量级Web应用框架
简单易用
双向数据绑定
组件化的思想
虚拟DOM
数据驱动视图
缺点：
不支持IE8

谈谈对SPA 的理解

SPA是Single-Page-Application的缩写，翻译过来就是单页应用。在WEB页面初始化时一同加载Html、Javascript、Css。一旦页面加载完成，SPA不会因为用户操作而进行页面重新加载或跳转，取而代之的是利用路由机制实现Html内容的变换。

优点
1.良好的用户体验，内容更改无需重载页面。
2.基于上面一点，SPA相对服务端压力更小。
3.前后端职责分离，架构清晰。
缺点
1.由于单页WEB应用，需在加载渲染页面时请求JavaScript、Css文件，所以耗时更多。
2.由于前端渲染，搜索引擎不会解析JS，只能抓取首页未渲染的模板，不利于SEO。
3.由于单页应用需在一个页面显示所有的内容，默认不支持浏览器的前进后退。

缺点3的补充：

前端路由机制解决了单页应用无法前进后退的问题。Hash模式中Hash变化会被浏览器记录（onhashchange事件），History模式利用 H5 新增的pushState和replaceState方法可改变浏览器历史记录栈。

MVVM 的理解

MVVM是Model-View-ViewModel的缩写。Model 代表数据层，可定义修改数据、编写业务逻辑。View 代表视图层，负责将数据渲染成页面。ViewModel 负责监听数据层数据变化，控制视图层行为交互，简单讲，就是同步数据层和视图层的对象。ViewModel 通过双向绑定把 View 和 Model 层连接起来，且同步工作无需人为干涉，使开发人员只关注业务逻辑，无需频繁操作DOM，不需关注数据状态的同步问题。

mvvm

这张图建议保存，十分直观，方便理解与记忆。

如何实现 v-model

v-model指令用于实现input、select等表单元素的双向绑定，是个语法糖。

原生 input 元素若是text/textarea类型，使用 value 属性和 input 事件。
原生 input 元素若是radio/checkbox类型，使用 checked属性和 change 事件。
原生 select 元素，使用 value 属性和 change 事件。

input 元素上使用 v-model 等价于

<input :value="message" @input="message = $event.target.value" />
复制代码

实现自定义组件的 v-model
自定义组件的v-model使用prop值为value和input事件。若是radio/checkbox类型，需要使用model来解决原生 DOM 使用的是 checked 属性和 change 事件，如下所示。

// 父组件
<template>
  <base-checkbox v-model="baseCheck" />
</template>
复制代码

// 子组件
<template>
  <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" />
</template>
<script>
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  prop: {
    checked: Boolean
  }
}
</script>
复制代码

Vue 响应式原理
核心源码位置：vue/src/core/observer/index.js

响应式原理3个步骤：数据劫持、依赖收集、派发更新。

数据分为两类：对象、数组。

对象
遍历对象，通过Object.defineProperty为每个属性添加 getter 和 setter，进行数据劫持。getter 函数用于在数据读取时进行依赖收集，在对应的 dep 中存储所有的 watcher；setter 则是数据更新后通知所有的 watcher 进行更新。

核心源码

function defineReactive(obj, key, val, shallow) {
  // 实例化一个 dep， 一个 key 对应一个 dep
  const dep = new Dep()
 
  // 获取属性描述符
  const getter = property && property.get
  const setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  // 通过递归的方式处理 val 为对象的情况，即处理嵌套对象
  let childOb = !shallow && observe(val)
  
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    // 拦截obj.key，进行依赖收集
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      // Dep.target 是当前组件渲染的 watcher
      if (Dep.target) {
        // 将 dep 添加到 watcher 中
        dep.depend()
        if (childOb) {
          // 嵌套对象依赖收集
          childOb.dep.depend()
          // 响应式处理 value 值为数组的情况
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      // 获取旧值
      const value = getter ? getter.call(obj) : val
      // 判断新旧值是否一致
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }

      if (getter && !setter) return
      // 如果是新值，用新值替换旧值
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      // 新值做响应式处理
      childOb = !shallow && observe(newVal)
      // 当响应式数据更新，依赖通知更新
      dep.notify()
    }
  })
}
复制代码

数组
用数组增强的方式，覆盖原属性上默认的数组方法，保证在新增或删除数据时，通过 dep 通知所有的 watcher 进行更新。

核心源码

const arrayProto = Array.prototype
// 基于数组原型对象创建一个新的对象
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]

methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  // 分别在 arrayMethods 对象上定义7个方法
  def(arrayMethods, method, function mutator (...args) {
    // 先执行原生的方法
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    // 针对新增元素进行响应式处理
    if (inserted) ob.observeArray(inserted)
    // 数据无论是新增还是删除都进行派发更新
    ob.dep.notify()
    return result
  })
})
复制代码

Vuex 的理解及使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态。

主要解决如下两个问题

多个视图依赖同一状态。
来自不同视图的行为需要变更同一个状态。

其包含如下模块，搬官网图

vuex

State：定义并初始化全局状态。
Getter: 依赖 State 中的状态，进行二次包装，不会影响 State 源数据。
Mutation: 更改 State 状态的函数，必须是同步。
Action：用于提交 Mutation，可包含任意异步操作。
Module：若应用复杂，Store 会集中一个比较大的对象而显得臃肿，Module允许我们将 Store模块化管理。

当然，若应用比较简单，共享状态也比较少，可以用 Vue.observe 去替代 Vuex，省去安装一个库也挺好。

Vue 路由传参方式
Vue 路由有三种方式进行传参

方案一
// 路由配置
{
path: '/detail/:id',
name: 'Detail',
component: () => import('./Detail.vue')
}
// 路由跳转
let id = 1
this. $router.push({ path: '/detail/$ {id}'})
// 获取参数
this.$route.params.id
复制代码
方案二
方案二，URL 虽然不显示我们的传参，但是是可以在子组件获取参数的。当然也有问题：会存在刷新丢失参数。

若想不丢失，需和方案一路由配置一样。原因是第二种方式传参是上一个页面 push 函数中携带的，刷新没有 push 的动作。

// 路由配置
{
path: '/detail',
name: 'Detail',
component: () => import('./Detail.vue')
}
// 路由跳转
let id = 1
this. $router.push({ name: 'Detail', params: { id: id } }) // 获取参数 this.$ route.params.id
复制代码
方案三
// 路由配置
{
path: '/detail',
name: 'Detail',
component: () => import('./Detail.vue')
}
// 路由跳转
let id = 1
this. $router.push({ name: 'Detail', query: { id: id } }) // 获取参数 this.$ route.query.id
复制代码