每日一篇——23秋招VUE面经（2）

⭐Vue.js是什么？请简要介绍一下Vue.js的特点

Vue.js是一款基于MVVM架构设计的渐进式JavaScript框架。它通过数据驱动视图的方式实现响应式，在开发过程中能够自动更新页面上的变化，无需手动操作DOM。Vue.js采用组件化开发模式，将界面拆分为多个独立的可复用组件，大大提高了代码复用性和可维护性。此外，Vue.js还支持单页面应用开发，通过内置的路由系统实现页面间的切换和无刷新加载，提供了良好的用户体验。为了克服首屏加载慢和SEO不友好等问题，可以使用Nuxt.js来进行服务器端渲染。在Vue 3中，推出了组合式API、diff优化、事件缓存、打包优化等新特性，进一步简化了开发流程，提升了性能和开发效率。

⭐解释一下Vue实例的生命周期钩子函数及其作用。

Vue.js的生命周期钩子函数用于在不同阶段执行特定的任务。在Vue 2中，常用的生命周期钩子有：beforeCreate（实例刚创建，但尚未初始化），created（实例已创建完成，可以访问data和methods等属性），beforeMount（在DOM挂载之前调用），mounted（在DOM挂载完成后调用），beforeUpdate（数据更新之前调用），updated（数据更新完成后调用），beforeDestroy（实例销毁之前调用），destroyed（实例已销毁）。在Vue 3中，部分生命周期钩子函数的名称发生了变化，并删除了beforeDestroy和destroyed钩子，新增了onBeforeUnmount和onUnmounted钩子。

⭐Vue组件之间的通信方式有哪些？请分别介绍它们的应用场景。

父子组件：

props传值，适用于父组件传递数据给子组件
自定义事件$emit，适用于子组件传递数据给父组件
子组件定义ref，父组件获取到子组件实例取到数据，适用于子组件传递数据给父组件

兄弟组件：

通过共同父组件或共同根组件进行通信，适用于兄弟组件兄弟组件：
```
this.$parent.on('add',this.add)
```
另一个兄弟组件：
```
this.$parent.emit('add')
```
EventBus总线，适用于兄弟组件传值

祖先与后代：

$attrs 与$ listeners，适用于隔代组件通信

$attrs中存有所有父组件传给子组件但子组件未通过props传递的值

$listeners中存有所有父组件中的（没有使用.native修饰的）v-on事件监听器

父组件传给子组件，子组件通过v-bind='$attrs'和v-on='$listeners'将两者传给孙子组件，孙子组件就可以获取对应数据和事件监听器

provide 与 inject，适用于祖先组件为后代组件传值

//祖先节点中，也可以写成对象形式
provide(){  
    return {  
        foo:'foo'  
    }  
}

inject:['foo'] // 获取到祖先组件传递过来的值

复杂情况：

通过vuex实现全局共享

⭐什么是Vue的计算属性（Computed）？与方法（Methods）有何区别？在什么情况下应该使用计算属性？

计算属性是Vue.js提供的一种便捷的属性计算方式。它会根据依赖的响应式数据自动进行计算，并缓存计算结果，在依赖没有发生变化时返回缓存的结果，从而避免不必要的重复计算。这对于那些依赖多个响应式数据进行复杂逻辑计算的情况下非常有用。而在方法中进行同样的计算，每次需要手动调用方法，而且每次调用都会重新执行计算逻辑，没有缓存机制，会导致不必要的性能损耗。因此，在需要频繁使用、且依赖数据具有变动性的情况下，通常应该使用计算属性。

⭐Vue中的路由是如何实现的？请简要介绍Vue的路由功能以及常用的路由配置选项。

Hash 模式：
- 使用 URL 中的 hash（#）来模拟路由，并通过 window.location.hash 来监听变化。
- 例如，一个使用 Hash 模式的路由路径可能是 http://example.com/#/home。
- Hash 模式下，每次路由发生变化时，URL 中的 hash 值会更新，但不会向服务器发送请求。
- 在 Vue.js 中，可以通过创建 VueRouter 实例时设置 mode: 'hash' 来启用 Hash 模式。
History 模式:
- 使用 HTML5 提供的 history.pushState 和 history.replaceState 方法来模拟路由变化。
- 例如，一个使用 History 模式的路由路径可以是 http://example.com/home。
- History 模式下，路由变化时，实际上是修改了浏览器历史记录中的当前页面路径，不会带有特殊字符（如 #）。
- 注意，在使用 History 模式时，需要服务器配置支持，以便在直接访问路由路径时返回正确的页面。
- 在 Vue.js 中，可以通过创建 VueRouter 实例时设置 mode: 'history' 来启用 History 模式。

对于选择使用哪种模式，可以考虑以下因素：

Hash 模式在老版本的浏览器中兼容性更好。
History 模式会带来更加友好的 URL 形式，但需要服务器配置支持。
如果不关心 URL 形式，或者在开发纯前端应用时，可以使用默认的 Hash 模式。

另外，可以通过base选项指定基本路径，linkActiveClass选项设置当前激活链接的class，scrollBehavior选项用于记录滚动位置。使用routes配置路由路径和对应的组件，可以使用对象数组形式，包括path和component等参数。此外，也可以使用函数方式来引入组件，以实现懒加载的效果。