前端高频面试题---VUE篇（一）

1. 简单说一下Vue框架以及它的优缺点

Vue是一个构建数据驱动的渐进性框架，它的目标是通过API实现响应数据绑定和视图更新。

Vue的优点主要有以下几点：

1. 易于学习和使用，Vue的语法简单，易于理解，并且与HTML和CSS紧密集成。它不需要任何特定的构建工具或附加设置，这使得对于初学者和有经验的开发人员都非常受欢迎。Vue也拥有出色的文档和教程资源，以帮助开发人员更快的学习和开始使用。
2. 响应式和高效，Vue的核心是响应式系统。这使得应用程序具有更高的性能和更好的用户体验；Vue能够捕捉数据的依赖关系，并在数据发生变化时更新应用程序的视图。Vue还有一种虚拟DOM的实现方式，它能够避免大量无意义的DOM操作，提高了应用程序的性能。
3. 组件化架构，Vue的组件化结构非常有用，因为它允许开发人员将一个应用程序拆分成小块的可重用组件。这种方法使得开发人员更容易维护和更新应用程序，并且可以更好的分配开发工作和测试工作，同时，组件化结构也使得应用程序更易于扩展。

Vue的缺点主要表现在以下几个方面：

1. 仍然存在一些技术债务，Vue作为一个新兴的框架，其部分实现仍需要不断改进和完善。
2. 生态圈不够成熟，与Angular、React等框架相比，Vue的生态圈还相对较小，这可能会限制其在某些方面的应用。

尽管存在一些缺点，但Vue仍然是一个非常优秀的框架，它的简单、灵活、高效等特点使其在前端开发中得到了广泛应用。

2. Vue和React有什么不同？

Vue和React有以下不同：

1. 模板渲染方式：Vue使用模板语法，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的。而React则通过JSX渲染模板。
2. 渲染过程：Vue在渲染过程中会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而React在应用的状态被改变时，全部子组件都会重新渲染。
3. 框架本质：Vue本质是MVVM框架，由MVC发展而来。而React是前端组件化框架，由后端组件化发展而来。
4. 数据流：Vue是响应式的数据双向绑定系统，而React是单向数据流，没有双向绑定。
5. 监听数据变化的实现原理：Vue通过getter/setter以及一些函数的劫持，能精确知道数据变化。而React则通过diff算法将新的数据和老的数据作对比，然后重新渲染。

总的来说，Vue和React都有各自的优点和缺点，具体选择哪个框架取决于开发者的需求和偏好。

3. vue中的虚拟 DOM?

虚拟DOM是Vue.js中一个重要的概念，它是一个轻量级的JavaScript对象，通过这个对象可以模拟真实的DOM结构。Vue.js通过虚拟DOM实现了一种更高效的DOM操作方式。

在Vue.js中，当数据发生改变时，Vue.js会将数据对象与虚拟DOM进行对比，然后通过算法生成一个新的虚拟DOM，最后将新的虚拟DOM渲染到页面上。这种方式避免了直接操作DOM带来的性能损耗，提高了页面的渲染效率。

虚拟DOM主要包括三个部分：一个根节点对象，一个节点的属性和一个包含子节点的数组。通过这三部分，Vue.js可以快速地创建、更新和销毁DOM节点。

总之，虚拟DOM是Vue.js中一个重要的优化手段，它通过模拟真实的DOM结构，提高了页面的渲染效率，优化了用户体验。

4. vue的生命周期有哪些？分别做了什么事情

Vue的生命周期是指Vue实例从创建到销毁的整个过程，包括创建前、创建后、挂载前、挂载后、更新前、更新后、销毁前和销毁后8个阶段。

1. 创建前（beforeCreate）: 在实例创建之前被调用，此时还没有创建任何数据和组件实例。
2. 创建后（created）: 在实例创建之后被调用，此时已经完成了数据的初始化，但是还没有挂载到DOM上。
3. 挂载前（beforeMount）: 在挂载开始之前被调用，相关的render函数首次被调用。此时还没有挂载html到页面上。
4. 挂载后（mounted）: 在el被新创建的vm.$el替换，并挂载到实例上去之后调用。此过程中进行ajax交互。
5. 更新前（beforeUpdate）: 响应式数据更新时调用，此时虽然响应式数据更新了，但是对应的真实DOM还没有被渲染。
6. 更新后（updated）: 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时DOM已经根据响应式数据的变化更新了。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。
7. 销毁前（beforeDestroy）: 实例销毁之前调用。
8. 销毁后（destroyed）: 实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

总之，Vue的生命周期是一个有机的整体，每个阶段都有其特定的任务和目标，开发人员可以根据需要在不同的生命周期钩子中进行开发和维护工作。

5. vue中watch 和computed有什么区别？

在Vue中，watch和computed都是用于监听数据变化的属性，但它们在处理数据变化的方式上有所不同。

1. watch属性： watch属性允许我们监听数据的变化，并在数据变化时执行一些特定的操作。当依赖的数据发生变化时，watch属性会立即触发并执行相应的函数。这种机制非常适合在数据变化时执行异步操作或复杂操作。需要注意的是，watch属性不支持缓存，也就是说，每次数据变化时，都会重新触发相应的函数。

2. computed属性： computed属性也允许我们监听数据的变化，并在数据变化时执行一些特定的操作。但与watch属性不同的是，computed属性是基于它们的依赖数据进行缓存的。这意味着，只有当依赖的数据发生改变时，computed属性才会重新计算并返回最新的值。这种机制非常适合在数据变化时执行频繁且计算代价较大的操作。需要注意的是，computed属性不支持异步操作。

综上所述，watch和computed属性在Vue中都是用于监听数据变化的机制，但它们在处理数据变化的方式上有所不同。watch属性适合在数据变化时执行异步或复杂操作，而computed属性适合在数据变化时执行频繁且计算代价较大的操作。