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？验证一下

4.对象的深拷贝有哪些？

1. ‌JSON序列化‌

通过JSON.stringify()将对象转换为字符串，‌然后再用JSON.parse()将其转回对象，但有其局限性，‌例如无法处理函数、‌undefined、‌Symbol等类型的数据

2.使用第三方库：lodash库提供的cloneDeep()方法

3.利用循环和递归的方式

    function deepClone(obj) {//判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝var objClone = Array.isArray(obj) ? [] : {};//进行深拷贝的不能为空，并且是对象或者是数组if (obj && typeof obj === "object") {for (let key in obj) {if (obj.hasOwnProperty(key)) {if (obj[key] && typeof obj[key] === "object") {objClone[key] = deepClone(obj[key]);} else {objClone[key] = obj[key];}}}}return objClone;}

5.import和export的区别？

6.vue中data是什么类型？数据是怎么双向绑定的？this.name怎么可以获取到data里的数据？

data是一个函数，原因：

数据