Vue自我总结面试

1.vue-router中有哪些模式？有什么区别？

Vue Router 提供了三种路由模式：‌Hash 模式、‌History 模式和 Abstract 模式。‌

Hash 模式（默认）：

• URL中带有 # ，兼容较老的浏览器。例如：http://xxxx.com/#/path。
• 当 URL 的哈希值发生变化时，浏览器不会向服务器发送请求，而是通过监听 hashchange 事件来进行路由导航。

History 模式：

• 使用 HTML5 的 History API 来管理路由。可使用正常的 URL 地址。例如：http://xxxx.com/path。
• 通过pushState方法+popstate事件来实现的，监听popstate事件是为了响应浏览器的前进后退功能。
• 当 URL 发生变化时，浏览器会向服务器发送请求，服务器需要配置相应的路由规则，以确保在刷新页面或直接访问 URL 时能正确响应路由。

history模式开发的SPA项目，需要服务器端做额外的配置，否则会出现刷新白屏（链接分享失效）。原因是页面刷新时，浏览器会向服务器真的发出对这个地址的请求，而这个文件资源又不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。这样的话，后端就无法判断404了，前端就需要在路由最后自己增加一个匹配‘*’，匹配所有其他路由，自定义自己的notFound.vue组件。

Abstract 模式：

• 主要用于非浏览器环境，比如在服务器端渲染（Server-Side Rendering）时使用。
• Vue Router 不会对 URL 进行任何处理，而是将路由信息保存在内存中，需要手动管理路由的变化

动态路由：动态路由允许你在运行时根据不同的条件添加或删除路由。方法：addRoute和removeRoute。这种灵活性对于构建复杂的单页应用尤为重要，尤其是在需要根据不同用户角色或权限动态显示或隐藏路由的情况下。

例如：.在导航守卫中添加路由后，如果立即导航到新添加的路由，需要使用 next 函数的参数来指定新路由：

router.beforeEach((to, from, next) => {
  // 添加路由逻辑
  router.addRoute('newRoute', {
    path: '/new-path',
    component: () => import('@/components/NewComponent.vue')
  });
  // 如果目标路由是新添加的路由，则直接导航到新路由
  if (to.path === '/new-path') {
    next({ ...to, name: 'newRoute' });
  } else {
    next();
  }
});

2.vue中，props与data优先级

props > methods > data > computed > watch

3.vue中，v-for 和 v-if 优先级？可以一起用吗？

Vue 2.x版本中，‌v-for 的优先级高于v-if，所以每次执行v-for都会执行v-if，一起使用会浪费性能，不建议同时使用。

解决方法：v-if 写在 v-for 的前面一层。

Vue 3.x版本中，‌v-if 的优先级高于 v-for，不推荐同时使用

3.第一次页面记载会触发哪些钩子？第二次/第n次会触发哪些钩子？刷新页面会触发哪些钩子？

第一次：beforeCreate,  created,  beforeMount,  mounted

如果加入<keep-alive>，会执行：beforeCreate,  created,  beforeMount,  mounted，activated

第2/n次：如果使用的是<keep-alive>组件来缓存组件状态。只会触发activated钩子，

              如果没有，beforeCreate,  created,  beforeMount,  mounted

刷新页面：beforeCreate,  created,  beforeMount,  mounted？验证一下