面试时面试官想要听到什么答案（关于一些vue的问题）

前言

本身也只是一个前端的小白，由于公司大佬都比较忙，面试这种事就落到了我这小白身上，第一次叫我去的时候我是百般拒绝的，由于本身仍是有自知之明的，可是别人实在抽不开身，没办法只能去了，他们开玩笑说就按你这水平来就好了，啥时候你问不住了就让他来复试就行。
前先后后也面了一些人，加上本身面试时候整理的一些问题，写了这篇文章，感谢拨冗翻阅拙做,敬请斧正。

下面进入正文，本文会列举一些平时面试时问到的问题和答案，并说明我在当时问到这个问题时所指望对方的回答：

vue生命周期（钩子函数）

问题

请说一下vue的生命周期函数（钩子函数）。

问题描述

首先关于生命周期函数，通常个人第一个问题就是这个，我认为是每一个使用vue的都要清楚的，若是这个问题答的问题很大其实我都不太想继续往下进行了。
即便英语不标准（我就是不标准的人，并非说这是个问题）也要去把关键点说清楚，哪一个地方有ed哪一个地方没有ed实际上是很关键的，或者能够手写下来，由于经常使用的就是created和mounted因此前4个能够清楚的手写出来并不难，后面4个不去详细说明都没事。（我本身工做中基本没用事后面4个）
在哪一个周期可以首次拿到data数据和在哪一个周期可以首次拿到mounted中的dom元素，若是没有说到这个问题，我通常会一直往下问，直到他说出来这两个答案。

指望答案

beforeCreate、created（此时需说明能够在created中首次拿到data中定义的数据）、beforeMount、mounted（此时需说明dom树渲染结束，可访问dom结构）、beforeUpdate、updated、beforeDestroy、destroyed

computed中的getter和setter

问题

说一下computed中的getter和setter。

问题描述

不少状况，我问到这个问题的时候对方的回答都是vue的getter和setter、订阅者模式之类的回答，我就会直接说问的并非这个，而是computed，直接让对方说computed平时怎么使用，不少时候获得的回答是computed的默认方式，只使用了其中的getter，就会继续追问若是想要再把这个值设置回去要怎么作，固然通常会让问到这个程度的这个问题他都答不上来了。

指望答案

<!--直接复制的官网示例-->
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
复制代码

watch监听对象

问题

如何watch监听一个对象内部的变化。

问题描述

这个问题我感受是一个不该该不会的问题，但是我遇到的人大部分都没有给出我所指望的答案，有些人会说直接监听obj，好一点的会说直接点出来监听obj.key，可是不多有人回答deep，开始我还会去问immediate，可是太多人不知道了，因此后来我就只问监听对象了，只有回答出deep的才会去问immediate的做用。

指望答案

若是只是监听obj内的某一个属性变化，能够直接obj.key进行监听。

watch: {
    'obj.question': function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }
复制代码

若是对整个obj深层监听

watch: {
    obj: {
        handler: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        },
        deep: true,
        immediate: true
    }
  }
复制代码

immediate的做用：当值第一次进行绑定的时候并不会触发watch监听，使用immediate则能够在最初绑定的时候执行。

v-for循环key的做用

问题

v-for循环时为何要加key。

问题描述

问这个问题时，好多人再先回答的都是页面有警告，编辑器有提示，我会直接说不考虑报错和提示的问题，或者会问若是不加key的话，页面会不会出现什么异常状况。有的人会说是一个标识，标识他的惟一性，我会继续追问为何要标识惟一性呢，不加又怎么样？

指望答案

vue的dom渲染是虚拟dom，数据发生变化时，diff算法会只比较更改的部分，若是数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。举例说明：有一个列表咱们如今在中间插入了一个元素，diff算法会默认复用以前的列表并在最后追加一个，若是列表存在选中一类的状态则会随着复用出现绑定错误的状况而不是跟着原元素，key的做用就能够给他一个标识，让状态跟着数据渲染。（这一块是我本身的一个大概理解，表述不太清楚，具体的能够去查一下文档，本文就不具体描述此问题了。）

$nextTick

问题

$nextTick用过吗，有什么做用。

问题描述

问到这个问题时，不少人都会说到能够处理异步，而往下追问为何要用nextTick，他解决了什么问题，不用他会怎么样的时候就不少人说不上来了。

指望答案

在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。(官网解释)
解决的问题：有些时候在改变数据后当即要对dom进行操做，此时获取到的dom还是获取到的是数据刷新前的dom，没法知足须要，这个时候就用到了$nextTick。

// 修改数据
vm.msg = 'Hello'
// DOM 尚未更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 做为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })
复制代码

$set

问题

vue中的$set用过吗，为何要用它，解决了什么问题

问题描述

这个问题知道的人就基本都能说出来，可是不知道的就是一点不了解，有的还会说到es6的set结构

指望答案

向响应式对象中添加一个属性，并确保这个新属性一样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，由于 Vue 没法探测普通的新增属性 (好比 this.myObject.newProperty = 'hi')（官方示例）

我本身的理解就是，在vue中对一个对象内部进行一些修改时，vue没有监听到变化没法触发视图的更新，此时来使用$set来触发更新，使视图更新为最新的数据。

组件间的传值

问题

说一下组件间的传值方式，你知道的全部方式都说一下

问题描述

这个问题其实就是想看官方文档有没有具体看过，由于不少传值方式官方文档上有描述，可是项目中用的相对较少。

基本都能回答上来，父传子：props；子传父：$emit；兄弟：eventbus；vuex；有一些会说到sessionStorage和localStorage、路由传参（这个答案其实并非我想要问的，不过也能够实现必定的传值）

如下传值方式的具体使用方式本文不具体描述了，这个连接是对这几种组件传值的具体介绍。

你不知道的vue组件传值方式

指望答案

1. provide / inject
   这对选项须要一块儿使用，以容许一个祖先组件向其全部子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
2. Vue.observable
   让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
   返回的对象能够直接用于渲染函数和计算属性内，而且会在发生改变时触发相应的更新。也能够做为最小化的跨组件状态存储器，用于简单的场景：

const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}
复制代码

3. $attrs
   包含了父做用域中不做为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含全部父做用域的绑定 (class 和 style 除外)，而且能够经过 v-bind="$attrs" 传入内部组件——在建立高级别的组件时很是有用。
4. $listeners
   包含了父做用域中的 (不含 .native 修饰器的) v-on 事件监听器。它能够经过 v-on="$listeners" 传入内部组件——在建立更高层次的组件时很是有用。
5. props
6. $emit
7. eventbus
8. vuex
9. $parent / $children / ref