vue常见面试题

1、 vue的双向数据绑定原理是什么？（必问）

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

Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理

2、请详细说一下你对vue生命周期的理解？（挑重点回答即可）

beforeCreate：实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载，vue实例的挂载元素$el和数据对象data为undefined，还未初始化，无法访问到数据和真实的dom，一般不做操作

created：这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取，因为这个阶段，数据对象data已经有了，但是挂载元素$el仍为undefined

beforeMount： 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。在这个阶段，vue实例的挂载元素$el和数据对象data都已经初始化了。

mounted：接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...

beforeUpdate：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

updated：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

beforeDestroy：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

destroyed：彻底销毁，在这里做善后工作也可以

3、Vue 组件data为什么必须是函数？

因为JS本身的特性带来的，如果data是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将data作为一个函数返回一个对象，那么每一个实例的data属性都是独立的，不会相互影响了。

4、Vue中key的作用

key的特殊属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。在相同父元素的子元素必须有独特的key，重复的key会导致渲染错误。

5、jQuery和Vue有什么不同？

jQuery专注视图层，通过操作DOM去实现页面的一些逻辑渲染；

Vue专注于数据层，通过数据的双向绑定，最终表现在DOM层面，减少了DOM操作。

Vue使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发。

6、vue父组件向子组件传递数据

通过 props

7、子组件向父组件传递事件？

通过$emit

8、说出几种vue当中的指令和它的用法

v-html：渲染文本（能解析 HTML 标签）

v-text：渲染文本（统统解析成文本）

v-bind：绑定数据

v-on：绑定事件

v-model ：双向数据绑定

v-for： 循环

v-if v-show： 显示与隐藏

v-once：只绑定一次

9、watch和computed的区别

watch是进行数据监听，然后进行相应的操作，执行方法等computed和methods的合体使用，比较耗性能，与vue性能优化相背而驰，尽量减少使用

computed是数据改变进行相应的数据变化，由老数据迸发新的数据（return返回），会利用缓存机制对数据进行缓存，只有当依赖数据变化的时候才会进行相应的变化

10、vue优点？

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；

简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；

双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；

组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；

视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；

虚拟DOM： dom 操作是非常耗费性能的， 不再使用原生的 dom 操作节点，极大解放 dom 操作，但具体操作的还是 dom 不过是换了另一种方式；

运行速度更快：相比较于 react 而言，同样是操作虚拟 dom ，就性能而言， vue 存在很大的优势。

11、vue中的v-show和V-if是做什么用的，两者区别是什么

v-if是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做—直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。

12、自定义指令的方法有哪些？它有哪些钩子函数？还有哪些钩子函数参数？

全局定义指令：在vue对象的directive方法里面有两个参数，一个是指令名称，另外一个是函数。

组件内定义指令：directives钩子函数：bind（绑定事件触发）、inserted(节点插入的时候触发）、update（组件内相关更新）

*bind 只调用一次，指令第一次绑定到元素时候调用，用这个钩子可以定义一个绑定时执行一次的初始化动作。

* inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用，不必存在document中)

* update: 被绑定与元素所在模板更新时调用，而且无论绑定值是否有变化，通过比较更新前后的绑定值，忽略不必要的模板更新

* componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用

* unbind: 只调用一次，指令月元素解绑的时候调用

钩子函数参数：el、binding

13、mvvm是什么？和mvc有什么区别？

MVVM：是Model-View-ViewModel的简写。即模型-视图-视图模型。模型指的是后端传递的数据。视图指的是所看到的页面。视图模型mvvm模式的核心，它是连接view和model的桥梁。在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

MVC：Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。

14、单页面应用（SPA）首屏加载慢怎么办？

安装动态懒加载所需插件，按需加载，使用cdn

15、vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

16、vuex有哪几种属性？

state ：基本数据(数据源存放地)

getters ：从基本数据派生出来的数据

mutations ：提交更改数据的方法，同步！

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

modules ：模块化Vue

17、vuex的原理是什么？

vuex仅仅是作为vue的一个插件而存在，不像Redux,MobX等库可以应用于所有框架，vuex只能使用在vue上，很大的程度是因为其高度依赖于vue的computed依赖检测系统以及其插件系统，vuex整体思想诞生于flux，可其的实现方式完完全全的使用了vue自身的响应式设计，依赖监听、依赖收集都属于vue 对象Property set get方法的代理劫持。

这里用最简单通俗的方法模拟了vuex实现的原理：

function registerPlugin(Vue) {

const vuex = {} //vuex本质是一个对象

vuex._vm = new Vue({

data: {

message: 'hello vue.js'

}

})

vuex.state = vuex._vm //state本质是一个vue实例

vuex.mutations = {

setMessage(value) {

vuex.state.message = value

}

}

function init() {

this.$store = vuex //this.$store本质上就是一个​​​​​​​vuex对象

}

Vue.mixin({//mixin的作用是多个组件可以共享数据和方法

beforeCreate: init

})

}

Vue.use(registerPlugin)

18、store注入的原理？

通过全局引用mixin方法使得所有Vue实例在beforeCreate下执行init方法，这个方法将this.$store绑定vuex对象注入

19、​​​​​​​vue-router是什么？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用（SPA）变得易如反掌。

20、vue-router有哪几种路由导航钩子？

1全局钩子

router.beforeEach 全局前置守卫 进入路由之前

router.beforeResolve 全局解析守卫 在beforeRouteEnter调用之后调用

router.afterEach 全局后置钩子 进入路由之后

2单个路由独享；

3组件级

beforeRouteEnter 进入路由前

beforeRouteUpdate 路由复用同一个组件时

beforeRouteLeave 离开当前路由时

21、怎么定义 vue-router 的动态路由? 怎么获取传过来的值？

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id。

22、路由的跳转方式有哪些？

1<router-link to=‘home’> router-link标签会渲染为<a>标签，template中的跳转都是这种；

2另一种是编程是导航也就是通过js跳转比如router.push(/home)

23、vue-router怎么实现路由懒加载？

1vue异步组件技术：异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。

2路由懒加载(使用import)。

3webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

24、$route和$router的区别

$router：VueRouter实例，想要导航到不同URL，使用$router.push方法。

$route：当前router跳转对象，里面可以获取name、path、query、params等。