vue部分面试题汇总

1.vue组件间通信
组件间通信包括父子组件传值，兄弟组件传值

 - 父子组件传值包括 父传子  子传父两种
 父传子就是在父组件中定义值，通过子组件调用处 v-bind:person=person(bash
（1）vue组件间通信组件间通信包括父子组件传值，兄弟组件传值 - 父子组件传值包括 父传子  子传父两种 父传子就是在父组件中定义值，通过子组件调用处 v-bind:person=person(这个是在父组件定义的值)。然后在子组件通过props接收值。
parent.vue
<template> 
    <person :person=person />
</template>
import person from "./person"
 export default {
 data:{
 return {
   person:'123'
     }
   }
 }

child.vue
<template> 
    <div> {{person}}</div>
</template>
 export default {
 props:['person']
 }


（2）.子传父
子传父是用事件传值，通过用$emit实现
child.vue
<template>
 <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
 </template>
 export default {
 data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件        传递值“子向父组件传值”
    }
 }
 }
parent.vue
<template>
 <child v-on:titleChanged="updateTitle" ></child>
 //在子组件调用处，绑定事件名要和子组件$emit的事件名保持一致。
 </template>

export default {
 data() {
    return {
      title:""
    }
  },
  methods:{
updateTitle(e) {
      this.title=e;//声明函数并赋值
    }
 }
 }

（3）.兄弟间传值
兄弟间传值 通过一个vue实例，用$emit和$on实现
  var Event=new Vue();//先new一个 vue实例
    Event.$emit(事件名,数据);
    Event.$on(事件名,data => {});
注：其实组件间传值还可以用vuex状态管理，祖孙级别的还可以用provide/inject

2.vuex是什么
Vuex实现了一个单向数据流，是全局的状态管理。

state:页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

actions：操作行为处理模块,由组件中的 $store.dispatch('action 名称',data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。

mutations:状态改变操作方法，由actions中的 commit('mutation 名称')来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。
getters：state对象读取方法。Vue Components通过该方法读取全局state对象。

3.v-model双向数据绑定原理
v-model本质上是 :value和v-on的结合体，就是绑定他的value,通过v-on触发，从而更新数据。双向绑定得的实现主要依Object.defineProperty(),通过这个函数可以监听到get,set事件。其中observer是最主要的部分，用Object.defineProperty来实现数据的劫持，然后用他的set,get方法来通知订阅者，触发update方法，从而实现更新视图

4.vue的生命周期

 - beforeCreate()实例初始化之后，组件被创建时期，这个时候的 el，data，message 都是 underfined
 - created()实例创建完成后，data、methods 被初始化
 - beforeMount()挂载初始之前，完成 el 初始化，render 被初次调用
 - mounted()完成挂载
 - beforeUpdate() 挂载完成之前访问现有 DOM ，比如手动移除已添加的事件监听器；也可以进一步修改数据
 - updated()由于数据更改，重新渲染界面时调用
 - beforeDestroy()实例销毁之前调用
 - destroyed()实例销毁后调有。调用后，所有东西都会被解绑，所有的事件监听器会被移动，子实例也会被销毁

5.vue的虚拟DOM
Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

6.diff算法
用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中
当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异
把所记录的差异应用到所构建的真正的DOM树上，视图就更新了

7.vue-loader是什么？使用它的用途有哪些？
vue文件的一个加载器，将template/js/style转换成js模块。
用途：js可以写es6、style样式可以scss或less、template可以加jade等

8.为什么使用key值
需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。