vue面试题

1什么是vue.js

Vue是一个javascript框架，它采用了mvvm模式，让开发人员可以轻松的创建交互式和响应式的web应用程序。

Mvvm是一种前端架构模式，分为3个部分模型Model 、视图view、视图模型viewmodel

2vue组件

vue组件它可以将一个页面或应用程序拆分成多个独立的，可复用的模块。

他的优点有很多：例如

组件可以在应用程序的多个地方进行复用，提高代码的可复用性。

它可以将复杂的应用程序拆分成多个简单的模块，便于开发和维护。

独立开发、测试和部署、方便团队协作。

插槽：简单来说就是子组件留下一个坑，然后父组件可以用指定内容去填上这个坑。这样可以帮助我们更好的管理和组织组件的内容，提高代码复用性。

3vue的生命周期

Vue的生命周期有四个阶段，分别为创建、挂载、更新、销毁

生命周期执行顺序：beforecreate created beforemounted mounted beforeupdate updated beforedestroy destroted

可以在mounted生命周期函数中操作DOM 因为此时组件已经挂载到页面上了

可以在created 和mounted 生命周期函数中发起请求 推荐在mounted上进行请求数据 因为在mounted生命周期中，vue实例已经被挂载到DOM上了，数据和DOM都准备好了，它可以保证DOM挂在完才去获取数据，如果在组件没有挂载到页面时，获取数据并修改DOM的话可能会出现问题，导致页面渲染不正常，当然在某些特殊情况，也可以在created上进行请求，但是要手动处理加载中状态，否则会出现渲染延迟或者空白的情况

Destroyed通常用于进行清理的工作，例如清除计时器，解绑事件监听器等，它可以确保组件中资源的及时释放

Nexttick是vue.js中重要的异步aip，他只有在DOM元素更新后才会执行的回调函数，因为它是异步函数所以它可以在created中调用然后用来操作DOM

作用：可以让开发人员在不同的阶段执行不同的自定义逻辑，例如在created可以初始化数据，在mounted中操作DOM元素

4vue的计算属性和侦听器

Vue的计算属性和侦听器都是可以用于处理vue实例的响应式数据，

计算属性是一个函数，根据vue实例的响应式数据计算出一个新的值，计算属性具有缓存机制，只有当计算属性依赖的响应式数据发生变化时才会重新计算。

侦听器也是一个函数，他是用于监听vue实例的响应式数据的变化，当数据发生变化的时候，侦听器会被调用，可以执行一些自定义操作

5v-model双向绑定原理?

双向绑定它是一种数据绑定的方式,它能够将数据模型和视图实时同步,     在vue中双向绑定它的实现原理就是通过数据劫持和事件监听相结合的方式   

具体来说,  当vue实例化  vue会对数据进行递归劫持,再利用object.defineProperty方法将数据转换成getter/setter,   在数据发生变化时，setter就会被触发，并通知视图进行更新。

vue3 跟vue2的双向绑定实现原理是相同的,但是在vue3中数据劫持的实现采用的是es6的新特性proxy,

Proxy性能优于object.defineProperty，   proxy它可以监听整个对象  object.defineProperty需要对每个属性都设置监听

当vue3实例化时,vue会将数据对象包装成Proxy对象,并且将数据对象中的属性转换成响应式数据

数据响应式：指的是当数据发生变化时，相关的视图会发生变化。Vue主要是通过数据劫持来实现数据响应式的。

6、Vuex

Vuex他是一个专门为vue设计的状态管理模式

State：用于存储数据，

Getters ：用于计算属性，

Mutations：用于修改state的数据，必须是同步的，可以通过this.$Store.commit触发

Actions：用于异步修改state中的数据 可以包含任意异步操作

Modules：可以将程序分割成不同模块，对大型应用程序可以更好的组织代码

使用方法：需要先通过引入 mapstate mapMutations mapActions mapGetters  方法 在组件使用

注意事项：   不要在mutations之外直接修改state；因为mutations是同步修改状态的，它可以监视状态变化，如果直接修改state 状态变得不可追踪

如果在mutation中执行异步操作的话会导致状态变更的追踪和调试变得非常困难

如果是异步操作可以使用actions来进行处理

使用actions来进行异步操作；例如请求等，它可以提交Mutations、dispatch或者其他actions等。

作用：集中管理状态，便于开发和维护

7、动态组件和动态路由区别

动态组件是vue中的一种组件，它可以根据父组件不同的条件或状态来切换子组件

动态路由是指应用程序中，在运行时根据不同的需求去加载不同的路由配置

两者都可以实现页面的切换，动态组件一般适用于某个页面的tab切换，如果组件多了会导致页面加载速度慢，在vue2中还需要注册组件。动态路由一般用于多模块之间。

Keep-alive：它具有缓存的作用，当被keep-alive包裹的时候，组件会被缓存起来，不会被销毁，也不会重新渲染。它也可以自动缓存组件内的数据和状态。比较复杂或着比较重要的组件可以通过keep-alive进行缓存，避免重新渲染是都需要重新创建和初始化，从而提高组件性能和用户体验。

8虚拟DOM

虚拟DOM它是一个js的对象，它封装了对应的真实DOM的相关信息，当数据发生改变时，优先操作虚拟DOM，然后将新的虚拟DOM和旧的虚拟DOM用diff算法找出变换的部分，将变换的部分编译成真实DOM渲染到页面上，尽量减少重排和重绘，提高性能

9mixin混入

本质就是一个对象，你可将一些公共的逻辑和状态通过mixin注入到组件里，使它可以在多个组件进行复用，从而增强组件的能力。

10路由

它可以基于不同的URL路径展示不同的内容，并且可以实现在不同的页面之间进行导航。

Router的实例，用于创建路由实例、管理路由配置和处理路由跳转；

路由配置：定义路由路劲、组件、名称、参数等相关信息的对象，

路由匹配：根据当前不同的url匹配到相应的路由配置，并渲染相关的组件。

路由跳转：可以通过编程式导航或者声明式导航进行路由的跳转，声明式导航可以直接加一个标签router-link来进行路由的跳转。编程式导航的话就是通过编写js代码来实现跳转的，可以通过this.$router来访问编程式导航的各种方法和属性，例如push、replace、go等

Push跳转会添加到历史记录，用户可选择回退等方式来访问之前的路由

Replace跳转不会添加到历史记录，用户不能进行回退

Go可以操作历史记录向前或者向后跳转，例如this.$router.go(-1)表示返回上一步，它可以进行直接跳转。

路由传参：可以通过params和query两种方式向路由组件传递参数，params是通过占位符方式来定义参数，适用于动态路由的场景。Query通过键值对方式来传参，适用于传递一些而外的数据信息的场景。当然也可以通过url来进行传参。

路由守卫：分为全局守卫和组件内守卫 路由独享守卫三部分；

全局守卫里面常用的beforeEach全局前置守卫用来判断用户是否进行登录来决定是否跳转。组件内守卫的话常用的就是beforeRouteLeave离开时组件的守卫，可以用来保存一些数据或者提示用户等操作。在路由守卫中，可以通过调用next函数来控制路由的放行，如果不调用next函数的话，就会让用户无法访问目标路由。

路由独享守卫就是当跳转到指定路由的时候会触发路由独享守卫

11路由的模式

路由有两种模式分别为hash模式（哈希）和history模式。

Hash模式中路由的变化不会引起浏览器向服务器发起请求，操作简单，无需后端进行任何的操作。

History模式中路由的变化会通过history API来修改浏览器的地址栏，并向服务器发送请求获取相应的页面内容。它可以利用浏览器的前进后退功能，缺点就是需要服务器支持。

12$route和$router

$Route可以获取当前路由的相关信息包括路径，参数等，并在组件内进行相应的操作

$Router是用来控制路由的跳转、监听事件等。我们可以通过$router来进行编程时导航，动态路由、路由守卫。

13、refs和ref

在vue2中，refs和ref都是用来获取DOM元素或组件实例的引用，不同的是，refs是在vue实例上声明一个对象，用来存储各个子组件或DOM元素的引用；而ref是在模板中使用的一个指令，用来给子组件或DOM元素赋予一个名称，以便在vue实例中使用refs对象获取它们的引用。refs对象只能获取DOM元素或子组件的引用，不能修改它们的属性或者调用他们的方法，refs在vue3中就不是一个对象了，它是一个函数，用来获取特定的元素或者组件的应用。

14、组件通讯

在vue中有很多种的组件通信方式。

父子传参：父组件通过props将数据传递给子组件，子组件通过this.$props访问父组件传递过来的数据。

子父传参：子组件通过$emit方法触发事件，父组件监听事件进行相应的处理。

兄弟传参：可以通过一个中介来进行将数据的传递例如子传父，父再传给子。也可以通过bus来进行通信。

跨级传参：我常用bus来进行传递参数；我听说还可以使用provide和injectAPI。

使用vuex：vuex也可以实现组件之间的数据共享和通信

Vuex和bus：bus和vuex都可以用于组件之间的通信，但是bus是一个简单的事件总线，只适用于组件之间简单的通信和事件通知；vuex更适合用于大型应用程序中管理复杂的数据和业务逻辑。