跳到主要内容

题目 33 - 题目 40

33. vue 中 route和route 和 router 有什么区别​

  1. $route：

功能：$route 对象包含当前路由的信息，包括路径、参数、查询字符串、路由名称等。

使用：用于访问当前路由的详细信息和状态。你可以从 $route 对象中获取路由参数、查询参数等。

测试代码
console.log(this.$route.path) // 当前路由的路径
console.log(this.$route.params) // 路由参数
console.log(this.$route.query) // 查询字符串
  1. $router：

功能：$router 对象提供了控制路由的功能，例如导航到不同的路由、替换当前路由等。

使用：用于编程式导航，控制路由的跳转。

测试代码
this.$router.push('/new-path') // 导航到新路径
this.$router.replace('/another-path') // 替换当前路径

34.vue3 响应式设计​

Vue 3 的响应式系统通过使用 Proxy 和 Reflect API，以及引入 activeEffect 和 ref 方法，实现了对数据变化的自动追踪和更新。

Vue 3 的响应式系统主要包括以下几个核心概念：

  1. Proxy：使用 Proxy 对象来拦截对象的读取和修改操作，通过定义 get 和 set 方法来实现对数据变化的自动追踪。
  2. Reflect：通过 Reflect API 来实现对对象属性的读取和修改操作，提供了与 Object.defineProperty 类似的功能，但更加强大和灵活。
  3. activeEffect：一个全局变量，用于保存当前正在执行的 effect 函数，以便在追踪依赖时使用。
  4. ref：将普通值转换为响应式可变的 ref 对象，其值可以通过 .value 属性访问和修改。

35.vue 路由中，history 和 hash 两种模式有什么区别？​

hash 模式

  • 实现方式：通过在 URL 后面添加井号 # 加上路径来切换页面，例如 http://example.com/#/a。
  • 优缺点：
    • 优点：兼容性好，支持老版本的浏览器。
    • 缺点：URL 中存在井号 #，不够美观。

history 模式

  • 实现方式：使用 HTML5 的 History API 直接更改 URL，例如 http://example.com/a。
  • 优缺点：
    • 优点：URL 更美观，没有井号 #。
    • 缺点：兼容性不如 hash 模式，且需要服务端支持，否则刷新页面会返回 404。

36.computed 怎么实现的缓存​

初始化计算属性：

  1. Vue 在实例化时会调用 initState 方法，其中包含了对计算属性的初始化。
  • 对于每个计算属性，Vue 会创建一个 Watcher 实例，并将其保存在 vm._computedWatchers 对象中。
  • 这些 Watcher 实例被标记为 lazy，意味着它们的值只有在首次读取时才会计算。
  1. 依赖收集：
  • 当执行渲染 watcher 的 getter 时，它会访问计算属性的值，从而触发计算属性的 getter。
  • 计算属性的 getter 会将当前的渲染 watcher 添加到 Dep.target 中，即当前激活的依赖收集器。
  • 计算属性的 getter 还会访问其依赖的数据（在这个例子中是 this.count），从而触发数据属性的 getter，将当前的渲染 watcher 添加到数据属性的 dep 中。
  1. 派发更新：
  • 当依赖的数据发生变化时，数据属性的 setter 会被触发，它会通知所有依赖它的 dep。
  • 计算属性的 dep 会调用其 notify 方法，通知所有依赖它的 watcher 进行更新。
  • 计算属性的 watcher 会检查自己的 dirty 状态，如果为 true，则执行 evaluate 方法重新计算值。
  • 重新计算的值会被返回给依赖它的渲染 watcher，从而触发视图的更新。

37. vue-loader 做了哪些事情​

  1. 解析 Vue 单文件组件：将.vue 文件中的模板、脚本、样式分别处理，模板编译成渲染函数，脚本和样式转换成可执行的 JavaScript 和 CSS。

  2. 支持预处理器：允许使用如 Pug、SCSS 等预处理器编写模板和样式，通过 webpack 配置相应 loader 来处理这些预处理器。

  3. 开发环境优化：提供热重载功能，让开发者在修改.vue 文件时能实时预览效果，无需手动刷新。

  4. 模块化组件：封装 Vue 组件的模板、脚本、样式为一个文件，支持组件间的嵌套和组合，提升代码可维护性和重用性。

  5. 动态加载：支持异步加载组件，提高应用性能和加载速度。

38.Vuex 有几种属性，它们存在的意义分别是什么？​

  • State：存储应用程序所有状态的单一对象。
  • Getter：派生状态的计算属性，类似于 Vue 的 computed 属性。
  • Mutation：同步更改状态的唯一方法，通过提交 mutation 实现。
  • Action：提交 mutation 的异步操作，可以包含任意异步操作。
  • Module：将状态分割成模块，用于组织和管理复杂的应用状态。

39.谈谈你对 Vue 中 keep-alive 的理解​

<keep-alive>是 Vue 的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染 DOM。

include 和 exclude 指定是否缓存某些组件

  • include 属性

include 包含的意思。值为字符串或正则表达式或数组。只有组件的名称与 include 的值相同的才会被缓存，即指定哪些被缓存，可以指定多个被缓存。这里以字符串为例，指定多个组件缓存，语法是用逗号隔开。如下：

测试代码
// 指定home组件和about组件被缓存
<keep-alive include="home,about">
  <router-view></router-view>
</keep-alive>

exclude 属性

  • exclude 相当于 include 的反义词，就是除了的意思，指定哪些组件不被缓存，用法和 include 类似，如下：
测试代码
// 除了home组件和about组件别的都缓存，本例中就是只缓存detail组件
<keep-alive exclude="home,about">
  <router-view></router-view>
</keep-alive>

keep-alive 的应用场景举例

  • 查看表格某条数据详情页，返回还是之前的状态，比如还是之前的筛选结果，还是之前的页数等
  • 填写的表单的内容路由跳转返回还在，比如 input 框、下选择拉框、开关切换等用户输入了一大把东西，跳转再回来不能清空啊，不用让用户再写一遍

40.vue 处理错误

后端接口错误 通过 axios 的 interceptor 实现网络请求的 response 先进行一层拦截

测试代码
apiClient.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (error.response.status == 401) {
      router.push({ name: 'Login' })
    } else {
      message.error('出错了')
      return Promise.reject(error)
    }
  }
)

代码逻辑错误

全局设置错误处理

测试代码
Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
  // 只在 2.2.0+ 可用
}

生命周期钩子

errorCaptured 是 2.5.0 新增的一个生命钩子函数，当捕获到一个来自子孙组件的错误时被调用

测试代码
(err: Error, vm: Component, info: string) => ?boolean
Loading Comments...