VUE面试题详解

一、VUE有哪些生命周期的钩子，分别能起什么作用？

   Vue算起来总共有八个生命周期的钩子，分别是：

   1.beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。什么意思呢？就是在这个阶段，Vue实例被创建，但是还没有在Vue实例对象里添加像data，methods等一些对象属性，就是这些还没被初始化。也还没有被挂载到DOM对象上。

     通常在这个钩子里会做一些loading事件

  2.created：数据绑定和事件监听初始化完成，但还没有完成挂载。就是说现在页面上还没有内容，Vue实例对象已经创建完成，属性和方法什么的都有了。

     通常会在这个阶段去向后台请求渲染页面需要的资源。

另外在第2步和第3步中间，Vue会执行compile函数，去编译模板。说白了就是根据<template>标签的HTML结构来创建虚拟DOM。

  3.beforeMount，在挂载开始之前被调用。在这个阶段，Vue已经将虚拟DOM绘制在页面上，但是数据的渲染还没做。就是说，现在已经可以访问到$el了，但是访问到的会是像这样

<p>{{message}}</p>

   而且还要注意，在这个阶段里，最好不要去操作$el或$refs绑定的DOM对象。因为这个阶段是Vue去标记这些DOM节点的时候，去操作的话可能会发生意想不到的错误。

   4.mounted:挂载完成。就是页面已经渲染好了。但是要注意的是，不能保证子组件也已经挂载完成，因此官方文档中推荐，如果希望整个页面包括子组件都渲染完成，可以使用$nextTick钩子。

     另外，如果想要在js中去操作DOM元素，也可以在这个阶段去做。

  5.beforeUpdata：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，      比如手动移除已添加的事件监听器。

  6.updataed：当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。就是说如果更改绑定的数据，重新渲染DOM，那么这个钩子中的函数会在DOM渲染完成后去执行。

    跟mounted一样，Vue不保证子组件也能够满足上述条件，因此使用$nextTick会更安全一些。

  7.beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

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

  除了以上八个生命周期的钩子函数，Vue还提供了三个用于组件和错误相关的钩子

    1.activated：keep-alive 组件激活时调用。

    2.deactivated：keep-alive 组件停用时调用。

    3.errorCaptured：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

二、Vue 如何实现组件通信

   这个可以分为三种方法：

   1.父子组件间通信：一般父组件向子组件传递数据会使用props。比如像这样

父组件：
<V-child :someData="propsData"></V-child>
propsData是定义在父组件data中的一个对象

然后在子组件的props属性中应该这样写
props:{
  someData:{
     type:Object,
     default:{
       ....
     }
   }
}

需要注意的是，例子中的子组件接收的someData对象中的type属性是指 指定的对象，如果不是指定的Object对象，就不会接收，而是使用default中定义的默认值。

另外，使用props传递数据是单向的。子组件如果要向父组件传递数据，要使用$emit和$on。举个例子

在父组件中，
不管在模板里或是JS代码里，
比如在模板的标签里，用v-on来监听一个事件
<Vchild @on-change="doSomething($event)"></Vchild>
doSomething($event)是定义在父组件methods里的一个函数，参数$event用来接收子组件传上的参数。

在子组件中
比如mothods中任意一个方法里去调用
this.$emit('on-change',向上传递的数据)

   2.非父子组件间通信

     非父子组件比如兄弟组件或是其他不同层级的组件间要实现通信，同理也是使用$on和$emit.

首先要先定义一个事件巴士，
var bass = new Vue()
然后在A组件中监听相关事件
bass.$on('doSomething',function(){
    ....
})

在B组件中去执行该事件
bass.$emit('doSomething',传递的参数)

   3.使用Vuex作为数据中心。

三、Vue的双向数据绑定实现原理

VUE主要是使用数据劫持和发布-订阅模式来实现双向数据绑定的。

主要做了下面三个工作：

1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数

四、computed和watch的区别

1.computed不能监听data中定义的属性。一般使用来监听一个模板中的变量，该变量依赖于data中的属性，当data属性有变化，能响应式的执行回调。

2.computed有缓存。计算属性是基于他们的依赖进行缓存的。可以看成是一个getter，又有区别。就是当依赖没有变化而去访问了计算属性时，不会执行回调，而是返回之前的计算结果。

而watch每次都会重新计算。

3.watch通常用来执行比较大开销的操作。