前端高频面试题含答案-vue篇（高频基础提问）（2024）

1. Vue有哪些特点？

1. 响应式数据绑定：Vue使用了双向数据绑定的概念，当数据发生变化时，视图会自动更新，反之亦然。

   
   （图片来源网络，侵删）

2. 组件化开发：Vue采用组件化的思想，将页面拆分为多个独立的组件，每个组件都有自己的逻辑和样式。这样可以提高代码的可复用性和可维护性。

3. 虚拟DOM：Vue使用虚拟DOM来提高渲染性能。虚拟DOM是一个轻量级的JavaScript对象，它表示真实DOM的映射。当数据发生变化时，Vue会通过比较虚拟DOM的差异来更新真实DOM，从而减少了对真实DOM的操作次数。

4. 模板语法：Vue使用了类似HTML的模板语法，使得开发者可以更直观地编写视图模板。模板语法支持插值、指令、事件处理等功能，使得开发者可以更方便地操作DOM。

5. 生态系统丰富：Vue拥有一个庞大的生态系统，包括了许多插件和工具，可以帮助开发者更高效地开发应用。同时，Vue也有一个活跃的社区，开发者可以在社区中获取支持和分享经验。

2.vue的双向数据绑定原理？

        Vue数据双向绑定的原理是通过数据劫持实现的。Vue中通过Object.defineProperty()方法来实现对数据的劫持，具体操作如下：

        1.在Vue中，当数据改变时，会触发setter函数，在setter函数中可以监听到数据的变化。

        2.当数据变化时，Vue会自动更新视图。Vue利用虚拟DOM技术来高效地更新视图。

        3.当用户在视图中改变数据时，会触发getter函数，这时Vue会自动更新数据。这就实现了双向绑定。

        需要注意的是，由于Object.defineProperty()方法只能监听到对象属性的变化，而无法监听到数组的变化，因此Vue对数组做了特殊处理，通过重写数组原型上的方法来监听数组的变化。

3.vue的生命周期钩子函数有哪些？它们分别在什么时候触发？

1. beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods等属性；
2. created：实例已经在内存中创建OK，data和methods等属性已经创建OK，但是还没有开始编译模板；
3. beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中；
4. mounted：此时，已经将编译好的模板挂载到了页面指定的容器中显示给用户看；
5. beforeUpdate：如果data中的数据发生了变化，此时会进入beforeUpdate这个生命周期函数，但是页面还没有开始重新渲染；
6. updated：此时页面已经完成了更新，用户也可以看到最新的数据了；
7. beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用；
8. destroyed：Vue实例销毁后调用，此时所有的事件监听器都已被移除，所有的子实例也都被销毁。

4.Vue组件之间的通信方式有哪些？

1. 父子组件通信：父组件通过props向子组件传递数据，子组件通过$emit触发事件向父组件传递数据。

2. 子父组件通信：子组件通过$emit触发事件向父组件传递数据，父组件通过监听子组件的事件来接收数据。

3. 兄弟组件通信：可以通过共享一个Vue实例或者使用一个空的Vue实例作为事件总线来实现兄弟组件之间的通信。

4. 跨级组件通信：可以通过provide/inject来实现跨级组件之间的通信，父级组件通过provide提供数据，子孙级组件通过inject注入数据。

5. 使用Vuex进行状态管理：Vuex是Vue官方提供的状态管理库，可以在不同的组件中共享状态，实现组件之间的通信。

6. 使用事件总线：可以创建一个空的Vue实例作为事件总线，通过$on和$emit来进行组件之间的通信。

7. 使用localStorage或sessionStorage：可以将数据存储在localStorage或sessionStorage中，在不同的组件中读取和修改数据。

5.keep-alive的作用是什么，原理呢?

在Vue中，keep-alive是一个抽象组件，它可以使被包含的组件保留状态，避免重新渲染。keep-alive具有以下作用：

1. 缓存组件状态：在使用keep-alive包裹一个动态组件时，每次切换时并不会销毁组件实例，而是把组件缓存起来，下次再使用时直接从缓存中获取。这样可以避免因频繁创建和销毁组件实例而造成的性能问题。

2. 提高渲染性能：由于keep-alive缓存了组件实例，因此在使用时可以直接读取缓存中的数据，而不需要重新渲染。这样可以有效地减少组件的渲染时间，提高页面性能。

3. 保留组件状态：在使用keep-alive时，如果一个组件被缓存了，那么它的状态也会被保留下来。这样可以避免因组件状态丢失而引起的错误，同时也可以提高用户体验。

关于原理，当一个被keep-alive包裹的组件在第一次渲染时，会触发该组件的activated钩子函数，并将该组件实例缓存起来。当再次渲染该组件时，会触发该组件的deactivated钩子函数，但不会销毁该组件实例。在下一次需要渲染该组件时，会直接从缓存中获取组件实例并渲染。

6.路由钩子有哪些？

在 Vue 中，路由钩子是指在路由发生变化时执行的函数。常见的路由钩子有以下几种：

1. beforeEach(to, from, next)：在进入每个路由之前调用，可以用来进行全局的权限控制。
2. beforeResolve(to, from, next)：在解析异步组件之后，在进入每个路由之前调用，也可以用来进行全局的权限控制。
3. afterEach(to, from)：在进入每个路由之后调用，可以用来进行页面的统计分析等操作。
4. beforeEnter(to, from, next)：在进入某个具体的路由之前调用，可以用来进行该路由的权限控制。
5. beforeRouteUpdate(to, from, next)：在当前路由被复用时调用，例如从 /user/1 导航到 /user/2。
6. beforeRouteLeave(to, from, next)：在当前路由离开之前调用，可以用来进行页面的数据保存或者弹出确认对话框等操作。

以上是常见的 Vue 路由钩子，通过这些钩子可以控制页面的跳转和数据的处理，增强应用的灵活性和安全性。

7.vuex刷新页面数据丢失，怎么解决？

Vuex中，页面刷新会导致数据丢失的原因是因为Vuex的状态是保存在内存中的，而不是持久化到浏览器的本地存储中。因此，当页面刷新时，Vuex的状态将被重置为默认值。

1.使用插件：使用 vuex-persistedstate 插件来自动将Vuex状态持久化到本地存储中，该插件支持多种本地存储（如localStorage、sessionStorage等）。

2.手动存储：在Vuex中定义一个action，当状态变化时，手动将状态持久化到本地存储中。可以使用localStorage或sessionStorage等浏览器提供的API来实现。

3.使用cookie：将Vuex状态存储在cookie中，这样当页面刷新时，可以通过读取cookie来恢复Vuex状态。

8.vue的指令有哪些？

Vue的核心指令主要包括：

1. v-bind 或 : (绑定): v-bind:key用于绑定元素属性，如 v-bind:class 用于绑定样式类。

2. v-model (双向数据绑定): 用于表单元素（如）或组件的值，实现了输入字段的值和Vue实例属性之间的实时同步。

3. v-if (条件渲染): 根据表达式的真假来控制元素是否显示或隐藏。

4. v-else (条件渲染的else部分): 与v-if配合使用，提供条件渲染的相反状态。

5. v-for (循环): 用于数组或对象迭代，渲染多次相同的元素。

6. v-on 或 @ (事件监听): 用于添加事件处理器，如 v-on:click 或 @mouseenter.

7. v-show (条件显示/隐藏): 直接改变元素的CSSdisplay属性，不会触发页面重排，适用于展示/隐藏较复杂的DOM结构。

8. v-hide 或 v-if false (条件隐藏): 与v-show类似，但会改变元素的display属性。

9. v-pre (预渲染): 告诉Vue不进行编译，保留原始HTML代码，通常用于模板引擎插件。

10. v-once (只渲染一次): 只渲染元素一次，然后将其转换为静态内容，适合于静态列表或无状态数据。

11. 其他一些常用的指令还包括v-bind:class (根据条件动态添加或移除样式类)、v-bind:href (处理URL绑定)等。

9.v-if 和 v-for  的优先级？

Vue的文档明确指出，当两者同时出现在同一个元素上时，v-for会具有更高的优先级。

10.v-if 与v-show的区别 什么时候使用？

v-if (条件渲染)：v-if 的特点是它会真正地从 DOM 中“隐藏”或“显示”元素；

v-show (简单的切换显示/隐藏)：无论 v-show 下的表达式值如何，组件或元素始终会被渲染到 DOM 中，只是添加了 display: none; 样式来隐藏它；

11.$nextTick的使用场景

主要用于在更新数据或方法后进行异步DOM操作，确保这些更改在浏览器渲染完成后执行。

12.watch和computed的区别？

watch 用于监听数据的变化，当数据发生变化时会触发相应的回调函数。watch 可以监听单个数据的变化，也可以监听多个数据的变化，还可以使用深度监听来监听对象或数组内部数据的变化。watch 的使用场景包括：当某个数据变化时需要执行一些异步操作、需要在数据变化时更新视图等。

computed 是一种计算属性，它会根据相关的响应式数据进行计算，并返回计算结果。computed 的计算结果会被缓存，只有相关响应式数据发生改变时才会重新计算。computed 的使用场景包括：需要根据一些响应式数据进行计算得出结果、需要缓存计算结果等。

总结来说，watch 适用于数据变化时需要执行一些副作用操作或者需要手动控制数据的变化时；而 computed 适用于需要根据一些响应式数据进行计算得出结果，并且需要缓存计算结果时。

---