前端vue经典面试题78道（重点详细简洁）

挂载： parent beforeCreate => parent created => parent beforeMount => child beforeCreate => child created => child beforeMount => child mounted => parent mounted
更新： parent beforeUpdate => child beforeUpdate => child updated => parent updated
销毁： parent beforeDestroy => child beforeDestroy => child destroyed => parent destroyed
从以上能够看出：
挂载时，子组件是在父组件before mount后开始挂载，并且子组件先mounted，父组件随后
更新时，子组件是在父组件before update后开始更新，子组件先于父组件更新
销毁时，子组件是在父组件before destroy后开始销毁，并且是子组件先销毁，父组件随后。

4.vue组件如何通信

1.父子组件props和this.$emit
2.ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs 属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值($parent / $children与 ref类似)
3.事件总线bus：使用一个空的 VUE 实例作为事件总线，自定义事件event.$on event.$off event.$emit
4 provide inject组件通信
5.vuex
6.$attrs和$listeners 仅仅是传递数据，而不做中间处理，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

常见使用场景可以分为三类：
父子通信：
父向子传递数据是通过 props，子向父是通过 events（$emit）；
通过父链 / 子链也可以通信（$parent / $children）；
ref 也可以访问组件实例；
provide / inject API；
$attrs/$listeners
vuex
兄弟通信：
事件总线Bus；
Vuex
跨级通信：
事件总线Bus；
Vuex；
provide / inject API
$attrs/$listeners

5.描述组件渲染和更新的过程

1、vue 组件初次渲染过程

解析模板为 render 函数
触发响应式，监听 data 属性的 getter 和 setter
执行 render 函数，生成 vnode，patch(elem,vnode)

2、vue 组件更新过程

修改 data，触发 setter （此前在getter中已被监听）
重新执行 render 函数，生成 newVnode，patch(vnode, newVnode)

6.双向数据绑定v-model的实现原理

双向数据绑定最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的.

先是从data里面的数据msg通过绑定到input控件和p标签上。然后input上通过v-on:input监听控件，触发change()。
调用方法都可以默认获取e事件，e.target.value是获取调用该方法的DOM对象的value值。把value值在赋给data里的msg，就是实现了双向数据绑定的原理了。

7.对mvvm的理解

m->model,v->view,vm->viewModel。dom通过监听事件操作vue里的data，反之vue中的data通过指令操作dom，这就是所说数据驱动视图，这就是mvvm的理解。

8.computed有何特性

缓存，data不变不会重新计算，提高性能

9.VUE 中如何封装组件？什么组件，为什么要封装组件？组件中 data 为什么是一个函数？

为什么要封装组件？

　　主要就是为了解耦，提高代码复用率。

　　什么是组件？

　　页面上可以复用的都称之为组件它是 HTML、CSS、JS 的聚合体。

　　组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。

　　组件中的 data 为什么是一个函数？

　　让每个返回的实例都可以维护一份被返回对象的独立的拷贝。

10.ajax请求应该放在哪个生命周期？

mounted，因为js是单线程，ajax异步获取数据

11.如何将组件所有props传递给子组件？

父组件绑定一个自定义属性变量，然后子组件通过props使用这个变量即可。

12.如何自定实现v-model?

我们定义了model对象。model对象包含两个属性，一个是prop，一个是event。prop值text1，event的值change1，我们这里写model是为了改变默认的东西，使用我们自己定义的变量。

13.多个组件有相同逻辑，如何抽离？

使用mixin 对公共部分的逻辑进行抽离

14.何时要使用异步组件？

加载大组件，路由异步加载

15.何时使用keep-alive？

缓存组件不需要重复渲染，多个静态tab页切换，优化性能

16.何时使用beforeDestroy？

1.解绑自定义事件event.$off

2.清除定时器

3.解绑自定义dom事件，如windom.scroll等

17.什么是作用域插槽？

在solt组件中有自己的data，把它传给使用的地方

18.vuex中action和mutation有何区别？

action中处理异步，mutation不可以

mutation做原子操作，action2可以整合多个mutation

19.vue-router常用路由模式

hash默认，h5 histroy需要服务端支持

20.如何配置vue-router异步加载

component:() => import('./component')

21.请用vnode描述一个dom结构

<ul id='test'>

<p class='hehe'>这里是p标签</p>

<li>{
  {1+1}}</li>

</ul>

let vdom={

    tag:'ul',

    props:{

     id:'test'

    },

    children:[

     {

     tag:'p',

     props:{

     class:'hehe'

     },

     children:'这里是p标签'

     },

     {

     tag:'li',

     children:1

     }

    ]

}

22.监听data变化的核心api是什么？

vue2.0核心api是Object.defineProperty，vue3.0是启用provy实现响应式

23.vue如何监听数据变化？

vue中的watch监听数据变化

24.请描述响应式原理？

1.描述监听data变化

监听对象变化：vue2.0核心api是Object.defineProperty，vue3.0是启用provy实现响应式

监听数组变化：重写数组的push.pop.shift.unshift.splice.sort.reverse方法

2.组件渲染和更新的过程(面试题5)

25.简述diff算法过程（了解）

在执行Diff算法的过程就是调用名为 patch 的函数，比较新旧节点。一边比较一边给真实的 DOM 打补丁。patch 函数接收两个参数 oldVnode 和 Vnode，它们分别代表新的节点和之前的旧节点。这个patch函数会比较 oldVnode 和 vnode 是否是相同的, 即函数 sameVnode(oldVnode, vnode), 根据这个函数的返回结果分如下两种情况：

true：则执行 patchVnode

false：则用 vnode 替换 oldVnode

//对比过程

找到对应的真实 dom，称为 el

判断 vnode 和 oldVnode 是否指向同一个对象。

如果是，那么直接 return。

如果他们都有文本节点并且不相等，那么将 el 的文本节点设置为 vnode 的文本节点。

如果 oldVnode 有子节点而 vnode 没有，则删除 el 的子节点。

如果 oldVnode 没有子节点而 vnode 有，则将 vnode 的子节点真实化之后添加到 el

如果两者都有子节点，则执行 updateChildren 函数比较子节点。