1.单页面应用和多页面应用的区别及优缺点

2.写出对虚拟dom的理解

概念：

虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新，最后创建真实的DOM

虚拟dom原理流程：

模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM

vuejs通过编译将模板（template）转成渲染函数（render），执行渲染函数可以得到一个虚拟节点树在对 Model 进行操作的时候，会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。

虚拟 DOM 的实现原理主要包括以下 3 部分：

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；

diff 算法 — 比较两棵虚拟 DOM 树的差异；

pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

3.vue组件之间通信的方式有哪些，是如何通信的

1. 父传子通过在父组件自定义属性，在子组件通过props接收

2. 子改父或者子传父在父组件中通过自定义事件传递方法，在子组件中通过$emit接收自定义事件

this.$emit(‘eventChange’,100)

3. 兄弟之间通信通过一个事件总线（eventBus 其实是一个空实例），在A组件中通过$on绑定自定义事件在B组件中通过$emit接收组件

4.通过$parent /$children/$refs $parent指的是父组件实例 $children/$refs是子组件实例

5. $attrs & $listeners

$attrs获取父组件中不被props接收的自定义属性并且可以通过 v-bind="$attrs" 传入内部组件

$listeners获取父组件中的自定义事件

6.provide & inject 祖先和后代之间的通信

Provide的值可以是对象或者是返回对象的函数

4.写出vue中的所有的生命周期函数，分别有什么作用

beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。

actived 在keep-alive中使用，缓存组件激活

deactived 在keep-alive中使用，缓存组件不激活

5.<keep-alive></keep-alive>的作用是什么?什么场景使用？常用属性？生命周期？

Keep-alive 是 Vue.js 内置的一个抽象组件，用于缓存有状态组件，可以在组件切换时保留组件的状态避免重新渲染。它有以下两个作用：

缓存有状态的组件，避免组件在切换时被重新渲染；

在缓存的组件被激活时触发 activated 钩子函数，在缓存的组件被停用时触发 deactivated 钩子函数。

使用 Keep-alive 可以提高组件的性能，尤其是在组件状态比较复杂或需要较长时间计算的情况下，通过缓存组件避免重复渲染，提高应用的性能。

6.写出你对vue的mixin的理解，有什么应用场景？

mixin（混入），提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。

本质其实就是一个js对象，它可以包含我们组件中任意功能选项，如data、components、methods、created、computed等等

我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来

在Vue中我们可以局部混入跟全局混入

使用场景

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立

这时，可以通过Vue的mixin功能将相同或者相似的代码提出来

7.Vue是如何实现双向绑定的原理？

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue实例来作为它的 data选项时，Vue将遍历它的属性，用Object.defineProperty()将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化。

8.写出vue路由中的导航守卫以及导航守卫回调函数中三个参数的作用

全局守卫：beforeEach,afterEach

局部守卫：

beforeRouteEnter:因为当守卫执行前，组件实例还没被创建,不能获取组件实例的this

beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用，可以访问组件实例 this

beforeRouteLeave:导航离开该组件的对应路由时调用，可以访问组件实例 this

每个守卫方法接收三个参数：

to:目标路由对象

from:准备要离开的路由

next():进行管道中的下一个钩子。可传递参数有布尔值false，直接写路径'/'或{path:'/'},回调函数

注意：后置钩子函数afterEach不会接受next函数也不会改变导航本身。

9.写出$route与$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等

10.vue-router路由传参有哪些方法，如何获取路由参数。

params⽅法传参的时候，要在路由后⾯加参数名占位；并且传参的时候，参数名要跟路由后⾯设置的参数名对应。

/user/:id这个路由匹配/user/111, /user/222这⾥的 id就是 params

query⽅法，就没有这种限制，直接在跳转⾥⾯⽤就可以。

query传参和params传参的区别

1）query 传参配置的是 path，而 params 传参配置的是name，且在 params中配置 path 无效

2）query传递的参数会显示在地址栏中，而params传参不会

3）query传参刷新页面数据不会消失，而params传参刷新页面数据回消失

4）params可以使用动态传参，动态传参的数据会显示在地址栏中，且刷新页面不会消失，因此可以使用动态params传参，根据动态传递参数在传递页面获取数据，以防页面刷新数据消失

11.vuex是什么？怎么使用？哪种功能场景使用它

vuex 就是一个仓库，仓库里放了很多对象。

其中 state 存放的是数据状态，不可以直接修改里面的数据。

getters类似vue的计算属性，主要用来过滤一些数据。

mutations:存放的是动态修改Vuex的state中保存的数据状态的方法。

actions:保存的触发mutations中方法的方法，可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。

一般什么样的数据会放在 State 中呢？

目前主要有两种数据会使用 vuex 进行管理： 1、组件之间全局共享的数据 2、通过后端异步请求的数据比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态

怎么使用Vuex? 在main.js引入store，注入。新建了一个目录store，… export

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

12.vue中hash模式和history模式的区别

Vue底层对它们的实现方式不同:

hash模式是依靠onhashchange事件(监听location.hash的改变)

history模式是主要是依靠的HTML5 history中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。

当真正需要通过URL向后端发送HTTP请求的时候，比如常见的用户手动输入URL后回车，或者是刷新(重启)浏览器，这时候history模式需要后端的支持。因为history模式下，前端的URL必须和实际向后端发送请求的URL一致，例如有一个URL是带有路径path的(例如www.libai.wang/blogs/id)，如果后端没有对这个路径做处理的话，就会返回404错误。所以需要后端增加一个覆盖所有情况的候选资源，一般会配合前端给出的一个404页面。

13.写出对路由懒加载的理解并写出它的用法

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：

// 将

// import UserDetails from './views/UserDetails.vue'

// 替换成

const UserDetails = () => import('./views/UserDetails.vue')

const router = createRouter({

routes: [{ path: '/users/:id', component: UserDetails }],

})

14.Vue2和vue3的响应式原理分别是什么，以及vue3为什么要更改实现响应式原理的方式

Vue2中使用的响应式原理是通过Object.defineProperty方法对数据进行劫持监听，从而实现数据的响应式更新。而Vue3中使用的响应式原理是基于ES6的Proxy实现的，通过Proxy对象代理数据，可以实现更高效的数据监听和更新，同时也可以监听到数组的变化。

15.说一下对vue3的理解以及新特性有哪些

Vue3 是 Vue.js 的最新版本，相比于 Vue2，它带来了许多变化和升级

新特性：

1）更快的渲染速度：Vue3 通过重写了 reactivity system 和 compiler，显著提高了渲染性能。

2）Composition API：Vue3 引入了 Composition API，允许开发者将一个组件的逻辑分割成可复用的逻辑代码块，提高了组件的可复用性，并且使代码更加清晰简洁。

3）Teleport：Teleport 是 Vue3 中新引入的功能，允许你将一个组件渲染到 DOM 树中的任何位置，使得像模态框这类弹出式组件的实现变得更加容易。

4）更好的 Typescript 支持：Vue3 深度整合了 Typescript，提供更好的类型检查和代码补全功能。

5）其他改进：Vue3 中还有一些其他的改进，如支持 Fragments、更好的警告和错误提示等等。

16.写一下setup函数的作用

setup函数是Vue3中引入的新特性，它是组件的一个选项，用于在组件初始化过程中执行一些逻辑操作。setup函数可以返回一个对象，该对象中包含组件中使用的响应式数据、方法等内容，可以通过解构赋值获取其中的内容。

17.Vue 3.x所采用的Composition Api 与Vue 2.x使用的Options Api 有什么区别

Vue 2.x使用的Options API是通过一个包含组件选项的对象来创建组件，包括data、methods、computed、watch等选项。而Vue 3.x采用的Composition API是通过函数的方式来组织组件的代码，可以将一个组件的相关逻辑组织在一起，提高代码的可读性和可维护性。

18.Vue 3.x中pinia有哪些核心属性以及在组件的使用？

pinia是Vue3中的状态管理库，具有以下核心属性：

$state：一个ref对象，用于存储状态数据。

$getters：一个包含所有状态的getter函数的对象。

$actions：一个包含所有操作状态的action函数的对象。

在组件中使用pinia，需要通过useStore方法来获取一个与组件相关联的状态管理对象。

19.Vue 3.x中生命周期函数相比Vue 2.x 有变化

Vue 3.x中的生命周期函数相比Vue 2.x发生了一些变化：

beforeCreate 和 created 已经合并成一个新的函数 setup。

deactivated 和 activated 已经被废弃，取而代之的是 beforeMount 和 beforeUpdate。因为在Vue3中，keep-alive组件被完全重写了，其默认行为现在与没有keep-alive一样。

20.写出Vue3中watch与watchEffect的区别

Vue3中的watch和watchEffect都用于监听数据的变化，但是它们之间有以下区别：

watch需要显式地监听数据变化，并且需要指定回调函数。在回调函数中可以处理数据变化的逻辑，也可以手动处理数据，因此灵活性更高。watch可以监听多个数据。

watchEffect则可以自动监听函数内部的响应式数据的变化，只要其内部引用的响应式数据发生变化，回调函数就会被调用。watchEffect不需要显式地声明监听哪些数据，因此代码更简洁，但也意味着它无法监听特定的数据。

21.写出对promise的理解，并用promise封装一个异步请求的方法

Promise是JavaScript中处理异步操作的一种机制。它代表了一个异步操作的最终完成或失败，并可以获取其结果。使用Promise可以更方便地管理异步代码，避免了回调地狱（callback hell）的问题，使代码更易读、可维护。

在Promise中，异步操作被封装在一个Promise对象中，它有三个状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当异步操作完成时，可以通过resolve函数将Promise状态从pending变为fulfilled，并传递异步操作的结果；而在异步操作失败时，可以通过reject函数将Promise状态从pending变为rejected，并传递失败的原因。

22. 为什么vue中v-if和v-for不建议一起使用？

如果它们同时出现在同一个元素上时，会引起优先级和渲染问题。

实际上，v-for 的优先级高于 v-if。这是因为 Vue 在编译模板时，会先处理 v-for，然后再处理 v-if。这就意味着，当 v-if 和 v-for 出现在同一个元素上时，每次数据更新时都会重新运行 v-for 指令，相当于重新渲染整个列表，这可能会影响性能。

如果需要根据条件过滤或渲染列表中的某些元素，可以使用计算属性或者过滤器来解决问题。比如，我们可以将 v-for 循环放到一个计算属性中，然后在模板中使用计算属性来渲染数据，并在该计算属性中使用 v-if 来过滤数据，这样就可以避免 v-for 和 v-if 之间的优先级问题，同时也能更好地控制渲染结果。