通过自己最近的面试整理出来的一些常问面试题，希望对大家有帮助，先更新部分Vue常问的一些面试题供大家参考，后续会持续更新，有什么问题欢迎大家在评论区指出来，谢谢！！

一、vue常问面试题

1.说一下你对MVVM的理解

MVVM 是Model-View-ViewModel 的缩写，Model是模型层，View是视图层，ViewModel负责把Model的数据同步到View显示出来，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定.

2.为什么Vue的data是一个函数

Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了；JavaScript只有函数构成作用域(注意理解作用域，只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。

3.谈一下Vue实现数据双向绑定原理

是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

4.说一下Vue生命周期

创建前 / 后：在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

载入前 / 后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前 / 后：当data变化时，会触发beforeUpdate和updated方法。

销毁前 / 后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

5.computed和watch的区别

computed

1.要计算的属性会随着其依赖的data中属性变化而变化，只要依赖的属性改变，就会执行computed，若无改变，则直接从缓存中取值

2.支持缓存，只有依赖数据发生改变，才会重新进行计算

3.不支持异步，当computed内有异步操作时无效，无法监听数据的变化

4.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

5.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

6.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

wacth

1.不支持缓存，数据变，直接会触发相应的操作；

2.watch支持异步；

3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4.当一个属性发生变化时，需要执行对应的操作；一对多；

5.监听的是这个属性自身的变化，且不会操作缓存

6.监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

immediate：组件加载立即触发回调函数执行，

deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep无法监听到数组的变动和对象的新增，参考vue数组变异,只有以响应式的方式触发才会被监听到。

6.父子组件生命周期执行顺序

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

7.谈一下你对$nextTick理解

$nextTick主要用于处理数据动态变化后，DOM还未及时更新的问题，用nextTick可以获取数据更新后最新dom的变化，当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，让修改后的data值渲染更新到dom元素之后在获取。

8.说一下对VueX的理解

vue框架中状态管理。在main.js引入store，注入

五种属性分别是 State、 Getter、Mutation 、Action、 Module state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法，同步

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

9.深拷贝和浅拷贝区别

深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

浅拷贝的实现方法：

   1.Object.assign()
   2.Array.prototype.concat()
   3.Array.prototype.slice()

深拷贝方法：

   1. JSON.parse(JSON.stringify())
   2. 手写递归方法
   3. 函数库lodash

10.v-show和v-if指令的共同点和不同点？

共同点：都能控制元素的显示和隐藏；
不同点：实现本质方法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
总结：如果要频繁切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要频繁切换某节点使用v-if（初始渲染开销较小，切换开销比较大）。

常见前端面试题