知道这些面试题，面试必过---概率99%（下篇）

之前总结了两篇面试必过系列 分别说了下html/css 和 js/jQuery 今天整理一下vue的东西 完整收尾

之前的两篇 有兴趣可以看下

知道这些面试题，面试必过---概率99%（上篇）

知道这些面试题，面试必过---概率99%（中篇）

1，vue钩子函数

• beforecreate ：这时候date和el都还没有初始化

• created：已经完成date的初始化，el还没有
  

• beforemount：完成el的初始化

• mount：完成el的挂载
  

• beforeUpdate：这里的更新对象是模板，即需要虚拟 DOM 重新渲染和打补丁，beforeUpdate发生在以上两个流程之前，此时新的虚拟DOM已经生成

• Update:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用，this仍能获取到实例，一般在这一步中进行：销毁定时器、解绑全局事件、销毁插件对象等操作

• destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
  

2，vue导航钩子

有三种方式可以植入路由导航过程中：

1. 全局的：前置守卫beforeEach、后置钩子afterEach。三个参数： to 、from 、next ，next 方法必须要调用，否则钩子函数无法 resolved

2. 单个路由独享的：beforeEnter 设置在router/index.js文件夹中

3. 组件级的beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

完整的导航解析流程：

导航被触发

在失活的组件里调用离开守卫

调用全局的 beforeEach 守卫

在重用的组件里调用 beforeRouteUpdate 守卫

在路由配置里调用 beforEnter

解析异步路由组件

在被激活的组件里调用 beforeRouteEnter

调用全局的 beforeResolve 守卫

导航被确认

调用全局的 afterEach 钩子

触发 DOM 更新

在创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

3，vue组件通信

• provide / inject
  这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

• 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}`)
  }
}

• $attrs
  包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

• $listeners
  包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

• props

• $emit

• eventbus

• vuex

• $parent / $children / ref

4，双向绑定原理

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的

5，$set

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

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

6,vue 性能优化

• 屏蔽sourceMap

• 对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩

• 对路由组件进行懒加载

• v-if 和 v-show选择调用

• 为item设置唯一key值

• 减少watch的数据

• 细分vuejs组件

7，watch监听对象

如果只是监听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则可以在最初绑定的时候执行。

8，computed中的getter和setter

9，v-for循环key的作用

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

10，$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。