Hello World

Appearance

On This Page

面试题[Vue生态系统] ​

1. Vuex ​

1.1 mapstate 引起的问题 ​

  • vuex 是单向数据流。
  • 双向绑定的是 data 里面的属性，更改 state，不触发 data 属性的 set，也就不触发依赖更新；computed 里面每次更改值，会重新走一遍依赖收集更新机制，所以没问题。
  • computed 就是一个 lazy 的 watch。

2. Pinia ​

2.1 Pinia 和 Vuex 的区别 ​

Pinia 和 Vuex 是 Vue 中常用的状态管理工具，但它们有一些明显的区别：

  1. API设计和使用方式：
    • Pinia 提供了更加简洁和现代化的 API，使用起来更加符合开发者的直觉，而 Vuex 的 API 相对复杂，需要定义多种概念，比如 state、mutations、actions 等。
    • Vuex：：Vuex 的 API 设计是基于 Flux 模式，需要定义 state（状态）、mutations（同步修改状态的方法）、actions（异步操作）和 getters（类似于计算属性）；两者之间的通信需要通过 commit 和 dispatch。
    • Pinia：Pinia 则更加灵活，可以直接修改 state，并且 actions 既可以是同步的，也可以是异步的，更符合现代 JavaScript 开发习惯。Pinia 还利用了 Vue3 的组合式 API，使得代码结构更加简洁。
  2. 模块化和状态可拆分性：
    • Vuex 需要手动分模块并合并，而 Pinia 支持更自然的模块化，通过定义和使用不同的 store 实现状态的拆分和复用。
    • Vuex：在 Vuex 中，模块划分需要手动编写，store 对象会变得庞大，需要手动引入各个模块并合并。
    • Pinia：Pinia 的模块化更加自然，每个 store 相当于是一个模块，可以单独定义并导入到组件中使用，这样的设计符合现代模块化开发的思想。
  3. 开发体验：
    • Pinia 具有更好的 TypeScript 支持，能提供更好的开发体验，尤其是在类型推导和 IDE 提示方面，而 Vuex 虽然也支持 TypeScript，但需要更多的手动配置。
    • TypeScript支持：Pinia 在设计之初就考虑了 TypeScript 的使用，类型推导非常自然；而 Vuex 支持 TypeScript 却需要更多的额外配置。
    • 调试工具：两者都支持 Vue DevTools，但由于 Pinia 遵循了 Vue 3 的新设计理念，所以在性能和调试效率上带来了优化。
  4. 插件生态：目前 Pinia 的插件生态还不如 Vuex 丰富。不过 Pinia 是 Vue 官方团队推荐的新一代状态管理工具，社区支持度和生态逐渐提升。

3. Vue Router ​

3.1 hash 模式和 history 模式的区别 ​

Vue Router 的 hash 模式和 history 模式主要区别在于 URL 的表现形式和实现方式。

  1. hash 模式：URL 中会出现 # 号，例如：http://example.com/#/home。hash 模式的原理是基于 window.location.hash 的变化，来实现更新视图而不重新加载页面。hash 模式的核心特性是利用了浏览器对哈希的支持，使得页面在哈希值变化时不会重新加载全部内容。
  2. history 模式：URL 是普通路径形式，例如：http://example.com/home。history 模式的原理是基于 HTML5 的 history.pushState 和 history.replaceState，通过这两个 API 来操作浏览器历史记录，改变 URL 同时不重新加载页面。所以使用 history 模式时，需要在服务端进行配置，让所有路由都指向同一个入口页面，否则会出现 404 错误。

3.2 route 和 router 的区别 ​

在 Vue Router 中，route 和 router 是截然不同的两个概念。简单来说，route 是一个当前路由信息对象，而 router 是 Vue Router 的实例。

  1. route

    • route 是针对当前活跃路由的对象， 它包含了当前路由的信息，比如路径（path）、参数（params）、查询参数（query）、路由匹配对象（matched）等。

    • 举例：this.$route，你可以通过它来获取当前路由的信息，如 this.$route.path 获取当前路径。

  2. router

    • router 是 Vue Router 的实例，它包含控制路由的功能，比如跳转（navigations）、导航守卫（guards）等。
    • 举例：this.$router，你可以通过它来执行路由导航，如 this.$router.push('/home') 进行页面跳转。

3.3 params 和 query 的区别 ​

在 Vue Router 中，params 和 query 是两种不同的传参方式：

  1. params：用于动态路径参数，需要在路由配置中定义。例如 /user/:id 中的 id 是一个动态参数，你可以通过 this.$route.params.id 来获取它。params 更加隐蔽，不直接暴露在 URL 中。
  2. query：用于查询参数，使用前不需要在路由配置中定义。它们会以键值对的形式出现在 URL 的问号之后。例如 /user?id=123，你可以通过 this.$route.query.id 来获取 id 的值。query 更适合较为显性的参数传递和处理。

3.4 路由之间是如何跳转的 ​

Vue Router 提供了两种基本的跳转方式：编程式导航和声明式导航。

  1. 编程式导航：

    使用 this.$router.push 和 this.$router.replace 方法进行路由跳转。其中 push 方法会在浏览器的历史记录中增加一条新记录，而 replace 方法则会替换当前的历史记录。

    javascript
    // 编程式导航实例
this.$router.push('/home'); // 跳转到/home路径
this.$router.replace('/login'); // 跳转到/login路径，替换当前的路径

  2. 声明式导航：

    通过 <router-link> 组件进行跳转。这种方式在模板中使用，使代码更清晰直观。

    javascript
    <!-- 声明式导航实例 -->
<router-link to="/home">Go to Home</router-link>