vue面试题状态管理、响应式原理、性能优化、存储响应式原理与性能优化类一、vue的基本原理数据绑定和响应式系统：V

持续更新中

状态管理、响应式原理、性能优化、存储

响应式原理与性能优化类

一、vue的基本原理

数据绑定和响应式系统：Vue的核心是数据驱动，通过Object.defineProperty实现数据的双向绑定，通过Observer类监控数据变化，确保视图与数据的实时同步。
虚拟DOM：Vue使用虚拟DOM来提高性能，当数据变化时，通过计算最小的DOM变更来更新实际DOM，降低不必要的DOM操作。
组件化开发：Vue强调组件化，每个组件封装独立的功能和样式，可复用性强，构建复杂的UI结构。
模板语法：Vue提供简洁的模板语法，使用{{ }}插值表达式和指令（如v-if, v-for, v-bind, v-on）来声明式地处理逻辑。
计算属性和侦听器：计算属性用于根据其他数据计算衍生值，自动缓存结果；侦听器则监听数据变化并触发相应操作。
生命周期钩子：Vue组件有多个生命周期钩子函数，如created, mounted, updated, destroyed，在组件的不同阶段执行特定任务。
插件扩展：Vue生态系统丰富，如Vue Router用于路由管理，Vuex用于状态管理，增强应用功能。
性能优化：Vue提供多种性能优化策略，如条件渲染、列表渲染的key属性、组件懒加载和缓存等。

二、双向数据绑定的原理

Vue.js 实现双向数据绑定的原理主要是基于以下两个核心机制：

数据劫持（Data Hijacking）：
- 在Vue 2.x版本中，主要通过Object.defineProperty方法来实现。Vue会在初始化时遍历数据对象的属性，并使用Object.defineProperty来为每个属性添加getter和setter。getter用于在访问属性时获取值，setter则在属性值被修改时触发。当数据发生变化时，setter会通知Vue，Vue随后会更新与该数据相关的DOM元素。
- 而在Vue 3.x中，采用了更现代的Proxy API来替代Object.defineProperty，Proxy可以拦截对象上几乎所有的操作，包括读取、设置属性值，以及迭代等，提供了更全面的数据劫持能力。
发布-订阅模式（Publisher-Subscriber Pattern）/ 响应式系统：
- Vue内部维护了一个依赖收集器，当数据被访问时，Vue会记录下这个数据的依赖关系，即哪些视图依赖于这个数据。当数据发生变化时，Vue会通过发布-订阅模式，通知所有依赖于该数据的视图进行更新。这一过程涉及到Watcher（观察者）的概念，每个Watcher会监听数据的变化，并在数据变化时执行相应的更新逻辑。

双向数据绑定的典型应用场景是表单输入控件，如v-model指令，它实际上是一个语法糖，结合了数据绑定和事件监听。当表单输入值发生变化时，Vue会通过上述机制自动更新数据模型；反之，当数据模型发生变化时，Vue也会自动更新表单的显示值，实现了数据与视图之间的双向同步更新。

三、使用 Object.defineProperty() 来进行数据劫持有什么缺点

无法监听属性的动态添加和删除：
- Object.defineProperty() 只能对已经存在的属性进行劫持，对于动态添加或删除的属性，需要额外的代码来跟踪和处理，否则这些新属性不会是响应式的。
数组操作的局限性：
- 对于数组，虽然Vue通过特殊的方法（如push, pop, splice等）覆盖了数组的原型，以便在这些方法内部更新依赖，但这并不能完全覆盖所有数组操作，比如通过索引直接修改数组元素或使用length属性。
性能开销：
- 遍历和定义每个对象属性会产生一定的性能成本，尤其是当对象有大量属性或者属性层级较深时，初始化和更新成本较高。
不支持深层观测：
- 如果对象包含嵌套的对象或数组，需要递归地定义每个子属性，否则嵌套的数据不会响应式。
不完全的数组变化检测：
- 尽管Vue尝试检测某些数组变化，但并不能捕捉到所有情况，例如通过索引直接修改数组元素，Vue可能无法感知到这种变化。
不兼容性：
- Object.defineProperty() 是ES5的方法，虽然现代浏览器普遍支持，但在旧版浏览器中可能不工作，需要额外的polyfill。
限制了某些JavaScript特性：
- 例如，Object.seal()、Object.freeze() 或 Object.preventExtensions() 这些方法会影响到响应式系统的正常工作，因为它们阻止了对象的进一步扩展。

Vue 3.x 中通过引入ES6的Proxy对象解决了这些问题，Proxy可以更全面地拦截对象的读写操作，包括动态属性的添加和删除，以及数组的变异操作，提供了更好的响应式能力和性能。不过，Proxy在一些旧的浏览器环境中可能存在兼容性问题。

四、defineProperty和proxy的区别？

静态 vs 动态：defineProperty是静态的，一旦定义，属性的元数据基本固定；而Proxy是动态的，可以改变其行为，提供更灵活的拦截和控制。
拦截范围：defineProperty只能单独定义一个属性，而Proxy可以拦截对象的所有操作，包括访问、修改、删除属性等。
元数据控制：defineProperty可以精确控制单个属性的元数据，如可写性、可枚举性、可配置性；Proxy则提供了更全面的控制，可以定义更复杂的拦截规则。
使用场景：defineProperty适合于对特定属性进行特殊处理或保护，而Proxy适用于需要广泛拦截和控制对象操作的场景，如数据验证、缓存等。
兼容性：defineProperty在ES5中就已经可用，浏览器支持较好；Proxy是ES6的新特性，部分老版本浏览器可能不支持，需要考虑兼容性问题。
性能：Proxy通常比defineProperty开销更大，因为它涉及到更多的运行时操作和拦截。

五、Vue3.0 为什么要用 proxy？

全方位拦截：Proxy可以拦截对象上的所有操作，包括读取（get）、设置（set）、删除（deleteProperty）、枚举（enumerate）、迭代（ownKeys）、赋值（has）、方法调用（apply、construct）等，这比Object.defineProperty只能拦截个别属性的get和set操作要强大得多。
动态监听：在Vue2.x中，Object.defineProperty只能在对象创建时定义响应式属性，一旦对象创建，就无法动态添加新的响应式属性。而Proxy可以监听对象的动态添加和删除属性，使得Vue3能更好地适应动态数据结构。
深度监听：在Vue2.x中，为了实现深度响应式，需要递归地对对象的每个层级进行定义，这在处理嵌套数据结构时性能较低。而Proxy可以监听整个对象，无需手动递归，提升了性能。
更少的运行时开销：虽然Proxy在创建时可能有更高的开销，但一旦创建，它在后续操作中的性能通常优于Object.defineProperty，特别是在处理大量数据时。
更好的类型安全：与Object.defineProperty相比，Proxy更易于与TypeScript等强类型语言配合，提供更好的类型检查和智能感知。
更好的开发体验：Proxy使得Vue3的响应式系统更加直观和简洁，开发者可以编写更接近自然语言的代码，提高代码的可读性和可维护性。
兼容未来技术：Proxy是ES6的特性，符合现代JavaScript的发展趋势，使用它能更好地利用现代浏览器的特性，为未来的功能扩展和优化打下基础。

状态管理与响应式原理类

一、Vuex 的原理？

状态集中管理：Vuex通过一个单一的store（仓库）保存应用的所有状态。这个store就是一个JavaScript对象，包含应用的state（状态）、mutations（变更函数）、actions（动作）、getters（计算属性）和modules（模块）。
响应式数据：Vuex中的state是响应式的，当state发生改变时，所有依赖于此state的组件都会自动更新。这得益于Vue的响应式系统，确保了视图与状态的一致性。
严格的状态变更：为了保证状态变更的可追踪和可预测，Vuex强制所有的状态变更都必须通过mutations来完成。Mutations是同步的，且每个mutation都有一个字符串类型的事件类型（type）和一个回调函数（handler），这个函数接收state作为第一个参数，第二个参数可选，通常用于传递导致状态变更的载荷（payload）。
异步操作与Actions：由于mutations必须是同步的，对于需要处理异步操作（如API调用）的情况，Vuex引入了actions。Actions可以包含任意异步操作，并通过commit调用来触发mutations，从而间接更新state。
模块化：对于复杂的应用，Vuex支持模块划分，每个模块拥有自己的state、mutations、actions和getters，这有助于组织和管理大型应用的状态。
Getters：类似于Vue的computed属性，getters用于从store的状态派生出一些状态，可以认为是store的计算属性。Getters可以接受其他getters作为参数，也可以接受state作为参数，使得状态的获取更加灵活和高效。

二、Vuex中action和mutation的区别？

Mutation：

目的：Mutation是Vuex中更改状态（state）的唯一途径，它直接处理state的修改，确保这些变更可追踪且容易调试。
性质：Mutation必须是同步函数，这意味着它们在执行期间不会进行异步操作，如API调用或setTimeout，这有助于保持状态变更的简洁性和可预测性。
调用方式：Mutation通过store.commit方法触发，传入一个mutation的名称（字符串）和可选的载荷（payload）。
记录和调试：Vuex DevTools可以记录每次mutation的执行，帮助开发者追踪状态变化的历史，便于调试和理解应用的行为。

Action：

目的：Action负责处理复杂的逻辑，特别是那些涉及异步操作的逻辑，比如调用后端API。它们不直接修改state，而是通过触发mutation来间接更新state。
性质：Action可以是异步函数，这使得它们非常适合处理网络请求、长时间运行的任务等场景。
调用方式：Action通过store.dispatch方法触发，同样接收一个action的名称和可选的载荷。
流程控制：Action内部可以包含多个步骤，包括调用API、处理返回数据、最后通过commit调用一个或多个mutation来更新state。
分发与链式调用：Action之间可以相互调用（分发），形成复杂的异步操作流程，而且支持Promise的链式调用，便于编写和维护异步逻辑。

总结： Mutation关注于同步地改变应用状态，强调的是状态管理的纯函数特性，确保状态变更的可跟踪性。而Action则提供了处理异步操作的能力，让Vuex能够应对更复杂的业务逻辑，同时保持整体状态管理的清晰和可控。两者相辅相成，共同构成了Vuex状态管理的核心机制。

三、Redux 和 Vuex 有什么区别，它们的共同思想？

Redux：

平台无关性：Redux 是一个独立的状态管理库，可以与任何UI框架（不仅仅是React）一起使用。
不可变数据：Redux 强制使用不可变数据，每次状态更新都会返回一个新的状态对象，而不是直接修改旧状态。
单一数据源：Redux 应用只有一个单一的store（状态树），所有状态都集中在这里管理。
action与reducer：Redux 中，状态更新通过action触发，这些action被reducer函数处理，reducer是纯函数，接受旧状态和action，返回新状态。
中间件支持：Redux 提供强大的中间件系统，允许在action到达reducer前进行拦截和处理，支持异步操作和日志记录等。
开发工具：Redux DevTools 提供了丰富的调试功能，可以记录每一个状态变化，帮助开发者理解状态流转。

Vuex：

Vue专用：Vuex 是专门为Vue.js框架设计的状态管理库。
可变数据：与Redux不同，Vuex中的状态是可以直接修改的，尽管推荐通过mutation来进行。
模块化：Vuex 自带模块化功能，方便大型应用的状态分割管理。
mutation与action：Vuex 使用mutation来处理同步状态变更，action则用于处理异步逻辑，但不强制要求所有异步操作都通过action。
状态、getter、mutation、action：Vuex 定义了明确的角色分工，使状态管理结构清晰。
便捷访问：Vuex 提供了mapGetters和mapActions等辅助函数，方便组件访问和触发状态变更。

共同思想：

单一数据源：无论是Redux还是Vuex，都提倡应用有一个单一的、集中的状态树，作为整个应用状态的唯一来源。
状态变更规则：二者都强调状态变更应该是可预测的，通过明确的规则（Redux中的reducer，Vuex中的mutation）来执行。
分离关注点：通过将状态管理从组件中抽离出来，使得状态逻辑和视图逻辑分离，提高代码的可维护性和可测试性。
响应式更新：都支持状态变更后自动更新相关联的视图，确保用户界面与状态保持同步。

总的来说，Redux和Vuex在设计理念上有很多相似之处，都是为了更好地管理应用状态，提升开发效率和应用的可维护性。它们的主要区别在于适用框架、数据处理方式（不可变vs可变）、以及一些特性和实现细节。

四、Vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)
getters => 从基本数据派生出来的数据
mutations => 提交更改数据的方法，同步
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

五、Vuex和单纯的全局对象有什么区别？

响应式状态管理：Vuex的状态存储是响应式的，这意味着当Vue组件从store中读取状态时，如果store中的状态发生变化，所有依赖这些状态的组件会自动更新。相比之下，使用单纯的全局对象来存储状态，不具备这种自动更新视图的能力，你需要手动处理状态变化后的UI更新。
状态变更机制：Vuex强制通过Mutation来改变状态，这是一种同步操作，且所有变更都被集中记录，使得状态变更过程清晰可追踪。而在全局对象中，状态可以在任何地方被随意修改，这不仅难以追踪状态变更的源头，还可能导致难以预料的副作用和bug。
异步操作处理：Vuex引入了Action来处理异步操作，如API调用等，Action可以触发Mutation来间接更新状态，这保持了状态管理的清晰性和可维护性。全局对象本身不提供管理异步逻辑的机制。
开发工具支持：Vuex与Vue DevTools集成，提供了强大的调试功能，可以记录每一次状态变更的细节，帮助开发者快速定位问题。全局对象的状态变更则难以被此类工具跟踪。
模块化和可扩展性：Vuex支持模块化，允许将庞大的状态树分割成小的、可管理的模块，这对于大型项目至关重要。全局对象没有内建的模块化机制，随着应用复杂度增加，状态管理会变得混乱不堪。
集中管理与解耦：Vuex通过集中存储和管理应用状态，促进了组件之间的解耦，使得状态逻辑与视图逻辑分离，提高了代码的可读性和可维护性。全局对象直接暴露在各个组件中使用，容易造成组件间的紧耦合。

综上所述，虽然使用全局对象可以简单地在组件间共享数据，但Vuex通过提供响应式、集中化、模块化的状态管理机制，以及对异步操作和调试的强大支持，显著提升了状态管理的效率和质量，更适合于中大型单页应用的开发。

六、为什么 Vuex 的 mutation 中不能做异步操作？

Vuex 的 mutation 被设计为同步的原因主要有以下几点：

可预测性：由于 mutation 必须是同步的，这确保了每次 mutation 的执行都是确定的，没有异步操作带来的不确定性。这样，开发者可以更容易地理解和追踪应用状态的变化，有利于调试和测试。
调试友好：Vuex 的开发工具（Vue DevTools）能够记录并展示每次 mutation 的执行，如果 mutation 中包含异步操作，那么记录和回放这些状态变更就会变得非常困难，因为异步操作的完成时间是不可预知的。
状态更新的原子性：Mutation 被视为一个原子操作，它应该一次性完成对状态的修改。如果允许异步操作，那么在状态更新的过程中可能会出现并发问题，导致状态不一致。
控制流程：Vuex 通过 actions 处理异步操作，这样可以保持 mutation 的简洁性，将复杂的业务逻辑和数据获取过程隔离，使得状态变更的控制流程更清晰。
避免错误：异步操作可能在错误处理上带来复杂性，尤其是在多个组件可能同时尝试修改状态的情况下。通过限制 mutation 为同步，可以避免这些潜在的冲突。
设计原则：Vuex 的设计原则之一就是保持状态变更的可预测性和一致性，而异步操作往往违背了这一原则。

综上所述，Vuex 将异步操作放到 actions 中是为了保持状态管理的整洁、可预测和易于调试，同时也提供了更好的控制和组织结构。通过这种方式，Vuex 可以帮助开发者构建更可靠和易于维护的Vue应用。

状态管理与存储类

一、Vuex 和 localStorage 的区别？

Vuex：

作用：Vuex是Vue.js应用的状态管理库，它集中管理组件之间共享的状态，使得状态的更新和访问变得有序和可追踪。
数据存储：Vuex的状态存储在内存中，随着Vue应用的运行而存在，关闭或刷新浏览器会丢失。
响应式：Vuex的状态是响应式的，当状态改变时，依赖于该状态的组件会自动更新。
变更控制：状态变更必须通过提交mutation来完成，保证了状态变更的可预测性和可调试性。
生命周期：Vuex有其自身的生命周期，包括初始化、更新、模块拆分等，方便管理和组织状态。
辅助工具：Vuex提供了如getter、action、mutation、module等辅助工具，帮助管理复杂的应用状态。

localStorage：

作用：localStorage是HTML5提供的本地存储API，用于在用户的浏览器上持久化存储数据，即使关闭浏览器或重启电脑，数据依然存在。
数据类型：localStorage只能存储字符串，如果需要存储复杂数据类型（如对象或数组），通常需要使用JSON.stringify和JSON.parse进行序列化和反序列化。
存储容量：localStorage的存储空间通常为5MB左右，比内存中的Vuex存储空间大。
无状态管理：localStorage没有响应式更新，当数据变化时，需要手动处理页面的更新。
跨域限制：localStorage遵循同源策略，不同源的页面无法共享数据。

应用场景：

Vuex适合于管理应用运行时的状态，尤其适用于需要实时响应状态变化的场景，以及组件间的复杂交互。
localStorage更适合于存储用户设置、应用配置等需要长期保留的数据，或者在不同会话之间需要共享数据但不需要实时响应的情况。

总结： Vuex和localStorage各有侧重，Vuex是为了解决Vue应用内部的状态管理问题，提供响应式和控制流，而localStorage是浏览器提供的持久化存储解决方案，两者在应用场景和数据管理上有明显的区别。在实际项目中，开发者通常会结合使用，以实现最佳的用户体验和数据管理。

基础语法类

一、Computed 和 Watch 的区别？

Vue.js 中的 computed 和 watch 都是用来处理数据变化和响应式更新的，但它们的用途和工作方式有所不同：

Computed Properties（计算属性）:
- 用途：计算属性用于根据其他数据计算出一个值，这个值是基于数据的依赖关系动态生成的。
- 缓存：计算属性的结果会被缓存，只有当它的依赖数据发生变化时，才会重新计算。
- 异步：计算属性的更新是异步的，与Vue的整个数据更新机制一致，这意味着它们不是立即更新的。
- 读取模式：计算属性通常用于读取操作，比如在模板中显示一个根据其他数据计算出来的结果。
Watchers（侦听器）:
- 用途：侦听器用于监听某个特定数据的变化，当该数据发生变化时，执行一个回调函数。
- 无缓存：与计算属性不同，watcher 每次数据变化都会执行回调，没有缓存机制。
- 灵活性：watcher 更加灵活，可以在回调中执行任何逻辑，包括异步操作，比如API调用。
- 写入模式：watcher 通常用于更复杂的逻辑，比如在数据变化时触发副作用，如更新其他数据、执行异步操作或发出网络请求。

简而言之，computed 主要用于计算和展示数据，而 watch 更适合用于数据变化后的复杂处理，特别是需要异步操作或者执行多个副作用时。如果你只是想根据其他数据来生成一个值，并且这个值不需要额外的副作用，那么 computed 是更好的选择。如果你需要在数据变化时执行一个函数，尤其是这个函数可能涉及异步操作，那么应该使用 watch。

二、Computed 和 Methods 的区别？

Computed Properties（计算属性）:
- 缓存：computed 的主要特点是具有缓存机制。一旦依赖的数据没有变化，计算属性会返回之前的计算结果，而不是再次执行函数，这提高了性能。
- 响应式：计算属性是基于它们的依赖进行自动更新的，当依赖的数据发生变化时，Vue会自动重新计算并更新相关联的DOM。
- 用途：适用于那些需要根据现有数据进行计算并频繁读取，但不经常改变结果的场景，如总价计算、过滤列表等。
- 声明式：在模板中直接使用计算属性，使得代码更加简洁、易读。
Methods（方法）:
- 无缓存：methods 是普通的函数调用，每次调用都会执行函数体内的代码，即使传入的参数没有变化。
- 即时执行：方法在每次触发时都会执行，没有计算属性的自动缓存效果，因此在性能上可能不如计算属性，尤其是在处理大量计算或DOM操作时。
- 用途：适用于执行特定操作或有副作用的逻辑，如API调用、修改数据状态、事件处理等。
- 调用方式：在模板中调用方法需要使用括号，如v-on或@click="methodName()"。

总结来说，如果你需要一个基于某些数据计算得到的值，并且这个值会频繁读取但不经常改变，应该使用 computed。而当你需要执行一个动作或处理函数，特别是有副作用或需要即时执行的逻辑时，应该使用 methods。computed 更注重性能和响应式，而 methods 更偏向于执行特定任务。

三、v-if和v-show的区别？

原理上的区别：
- v-if：是一个条件渲染指令，它会根据表达式的真假来决定是否渲染元素或模板。如果条件为假，则DOM中不会创建该元素。这意味着每次条件变化时，都会进行真实的DOM创建和销毁操作。v-if具有更高的切换开销，但首次渲染时较为高效，因为它只渲染需要的部分。
- v-show：同样用于条件展示，但它通过CSS的display属性来切换元素的显示或隐藏（默认为display: none来隐藏元素）。无论条件真假，元素始终会被渲染并保留在DOM中，只是简单地切换可见性。因此，v-show的初始渲染开销较大，因为它渲染了所有元素，但切换显示状态的开销较低。
性能考量：
- 当条件变化频繁时，v-show更优，因为它避免了DOM的频繁创建和销毁，减少了重排和重绘的成本。
- 如果条件很少变化或者需要首次加载时减少渲染负担，v-if更为合适。
初始渲染状态：
- v-if在初始条件为假时，不会渲染DOM元素，因此首次加载时可能更快，特别是当渲染组件代价较高时。
- v-show则始终渲染DOM元素，即使初始不可见，这可能导致首次渲染较慢，但之后的切换更快。
适用场景：
- 对于条件较为固定，不需要频繁切换的场景，使用v-if可以减少不必要的DOM操作。
- 对于需要频繁切换显示状态的情况，使用v-show可以提升用户体验，因为它避免了DOM的重建。

总结来说，选择v-if还是v-show取决于具体的应用场景和性能需求。如果关心首次加载速度和条件较为稳定，倾向于使用v-if；若需频繁切换且关注切换性能，则v-show是更好的选择。

四、v-model 是如何实现的，语法糖实际是什么？

实现原理：
- v-model是Vue.js中用于实现双向数据绑定的指令，它主要用于表单元素。它通过将数据属性与表单元素的值绑定，并监听元素的输入事件，实现实时同步。
- 当用户在表单元素中输入时，Vue会监听input或change事件（根据元素类型），并更新对应的Vue实例数据属性。
- 反之，当Vue实例中的数据属性改变时，Vue会同步更新表单元素的值，保持双向绑定。
组件中的v-model：
- 在自定义组件中，v-model被用作一个特殊的prop和一个特殊的事件，允许组件与父组件进行数据通信。组件通过接收一个prop（通常是value）并监听一个自定义的input事件来实现v-model的功能。
语法糖：
- “语法糖”是指一种简化后的语法形式，它隐藏了实际实现的复杂性。v-model就是这样一个语法糖，它简化了原本需要手动绑定value属性、监听事件和处理事件的代码。
- 通过使用v-model，开发者不需要显式地编写v-bind:value和v-on:input（或其他事件，如v-on:change），Vue会自动处理这些细节，使代码更简洁、更易读。
可选的修饰符：
- Vue还提供了一些修饰符，如.lazy（在change事件而非input事件时更新）、.number（确保输入值为数字类型）和.trim（去除输入值的前后空格），这些修饰符扩展了v-model的功能，使其更加灵活。

v-model是Vue.js中实现双向数据绑定的重要工具，它简化了数据绑定和事件监听的代码，使得开发者能够更专注于应用逻辑，而不是底层的数据同步细节。它在表单元素和自定义组件中都有广泛的应用，提供了高效、直观的用户体验。

五、描述下Vue自定义指令？

Vue自定义指令用于扩展Vue的内置功能，实现对DOM的特定操作。创建一个自定义指令分为两步：

注册指令：
- 全局注册：Vue.directive('directiveName', { /* 钩子函数 */ })
- 局部注册：在组件中定义directives选项：directives: { directiveName: { /* 钩子函数 */ } }
使用指令：
- 在模板中，通过v-directiveName语法将指令应用到元素上，可以传入参数：v-directiveName:"value"

例如，创建一个简单的自定义指令v-focus，使得元素在渲染时自动获取焦点：

// 全局注册
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

// 或者在组件中局部注册
directives: {
  focus: {
    inserted: function (el) {
      el.focus()
    }
  }
}

在模板中使用：

<input v-focus>

当Vue渲染此组件时，输入框将自动获得焦点。这就是如何创建和使用一个简单的Vue自定义指令。记住，自定义指令应当谨慎使用，避免过度操作DOM，保持应用的可维护性和性能。

六、什么是mixin？

Mixin是一种编程技术，常用于面向对象语言和一些现代前端框架中，如Vue和Less等，目的是为了实现代码的复用和模块化。Mixin允许你将一组相关的属性或方法“混入”（mix into）另一个类或对象中，从而共享或扩展功能，而无需通过继承来达到目的。

具体到前端开发场景：

在Vue中，mixin是一个包含组件选项的对象。你可以将组件中可复用的功能（如数据、计算属性、方法、生命周期钩子等）抽离到mixin中，然后在多个组件中通过mixins选项引用它。这样，所有引用了该mixin的组件都将获得mixin中定义的功能，有利于保持代码的DRY（Don't Repeat Yourself）原则。
在CSS预处理器如Sass或Less中，mixin用于定义可复用的样式块，可以接受参数，类似于函数。你可以在需要的地方调用mixin，它会根据传入的参数生成相应的CSS代码，有助于减少代码重复并增强样式的维护性。

简而言之，mixin是一种设计模式，帮助开发者组织和复用代码，提高开发效率和代码质量。在回答时，可以结合实际开发经验，给出具体示例或在Vue或CSS预处理器中的应用，以加深面试官的理解。

原理与拓展

一、对 React 和 Vue 的理解，它们的异同？

相同点：

组件化：两者都支持组件化的开发模式，将UI拆分成可复用的组件，提高了代码的重用性和可维护性。
虚拟DOM：React和Vue都使用虚拟DOM来提高性能，避免直接操作DOM，通过比较和更新虚拟DOM树来决定实际DOM的变化。
数据驱动：它们都是数据驱动的框架，通过改变数据来自动更新视图。
社区支持：两者都有庞大的开发者社区，丰富的生态系统，包括各种库、插件和工具。

不同点：

模板与JSX：
- React：主要使用JSX，它允许在JavaScript中书写类似HTML的语法，将HTML和JS逻辑混合在一起。
- Vue：使用基于HTML的模板语法，更接近传统的HTML，通过指令（如v-if, v-for, v-bind等）实现逻辑控制。
数据绑定：
- React：默认单向数据流，数据从父组件流向子组件，但可以通过Context API或Redux等库实现复杂的数据管理。
- Vue：支持双向数据绑定（v-model），简化表单元素的交互，但可能导致数据流更难跟踪。
状态管理：
- React：状态管理通常需要借助Redux、MobX等第三方库来实现。
- Vue：有官方的Vuex状态管理库，提供集中式的状态管理方案。
性能优化：
- React：需要手动使用shouldComponentUpdate等生命周期方法进行性能优化。
- Vue：通过依赖追踪和计算属性自动进行性能优化，但Vue的组件默认全量更新，有时也需要手动优化。

二、Vue的优点？

轻量级与高效：Vue的核心库非常小巧，压缩后只有几十KB，这使得它的加载和运行速度都非常快。Vue利用虚拟DOM技术，提高了页面渲染的性能。
易学易用：Vue的API设计简洁直观，学习曲线平缓，即便是前端新手也能快速上手。相比Angular等其他框架，Vue更易于理解和实施。
数据绑定与响应式：Vue实现了数据的双向绑定，使得数据模型的变化能立即反应到视图上，反之亦然，大大简化了状态管理。Vue的响应式系统能够自动追踪依赖，减少手动更新DOM的工作。
组件化开发：Vue鼓励组件化开发，可以将UI拆分成可复用的组件，这不仅提高了代码的可维护性和可重用性，也使得复杂界面的构建变得更加模块化和条理清晰。
指令系统：Vue提供了一系列内置指令（如v-if, v-for, v-bind, v-on等）以及自定义指令的能力，使得开发者能够以声明式的方式处理DOM操作和逻辑控制，使得模板更简洁。
强大的生态系统：Vue拥有丰富的生态系统，包括Vue CLI（命令行工具）、Vue Router（路由管理）、Vuex（状态管理）、Vue Test Utils（测试工具）等，这些工具极大地提高了开发效率。
灵活性与可扩展性：Vue既可以在小型项目中作为库使用，也可以在大型项目中作为完整的框架使用。它的设计允许开发者根据项目需求灵活选择功能模块。
良好的SEO支持：通过服务器端渲染（SSR）或预渲染技术，Vue应用可以改善搜索引擎的可见性，提高SEO效果。
视图、数据、结构分离：Vue遵循MVVM模式，使得视图、数据和结构得以有效分离，便于维护和协作。

三、对SSR的理解？

SSR，即服务器端渲染，是一种Web应用渲染技术，与传统的客户端渲染相对。在SSR模式下，网页的初始HTML内容不是由浏览器中的JavaScript生成，而是由服务器生成。具体来说，服务器会接收到客户端的请求，然后执行相应的JavaScript代码（通常是前端框架如React、Vue的代码），将数据填充到模板中，并生成完整的HTML页面，最后将这个HTML发送给浏览器。浏览器接收到的是一个已经渲染好的页面，用户可以立即看到页面内容，而不需要等待JavaScript执行和DOM操作。

SSR的主要优点包括：

SEO友好：搜索引擎爬虫可以直接抓取到完整的HTML内容，有助于提高搜索引擎排名。
首屏加载速度快：用户首次访问时，无需等待JavaScript下载和执行，即可看到页面内容，提升了用户体验。
支持不支持JavaScript的环境：对于禁用JavaScript的浏览器或爬虫，SSR确保了内容的可访问性。

然而，SSR也面临一些挑战：

服务器负载增加：因为每个页面都需要在服务器上渲染，这可能会增加服务器的计算负担。
开发复杂度：相比于纯前端渲染，SSR需要处理服务器端与客户端状态同步、数据预取等问题，增加了开发和维护的复杂度。
延迟：虽然首屏加载快，但服务器渲染和网络传输时间可能会比直接加载静态HTML文件要长。

实现SSR的过程通常包括：

开发服务器端渲染逻辑，这通常涉及到在Node.js环境中运行前端框架的服务器端版本。
配置路由以支持服务器端渲染，确保服务器可以根据URL路径正确渲染对应的组件。
处理客户端与服务器端的状态一致性，可能需要使用Hydration（水合）技术，即在客户端重新激活JavaScript，恢复为交互式应用。
优化数据获取策略，如预渲染、数据预拉取等，以减少用户等待时间。

总的来说，SSR是提升Web应用性能和SEO的有效手段，但需权衡其带来的好处与额外的复杂性和成本。

四、MVVM的优缺点?

MVVM的核心思想是将数据模型与视图模型绑定，实现数据和界面的自动同步。

优点：

数据绑定：MVVM通过双向数据绑定，使得视图（View）和模型（Model）之间的变化能实时反映到对方，减少了手动操作DOM的复杂性。
低耦合：视图和模型之间通过ViewModel进行解耦，视图的改动不影响模型，模型的改动也不会直接影响视图，提高了代码的可测试性和可维护性。
组件化：ViewModel可以被多个视图复用，促进代码的重用，降低了开发复杂性。
简化视图逻辑：ViewModel负责处理复杂的业务逻辑和视图状态，视图变得更轻量，专注于显示数据。
可扩展性：MVVM模式允许添加新的ViewModel和视图，易于扩展和重构。

缺点：

调试复杂：由于数据绑定和自动化更新，当出现错误时，可能需要深入理解数据绑定机制来定位问题，调试过程可能较为复杂。
性能开销：双向数据绑定可能导致不必要的计算和DOM操作，尤其是在大型或高性能要求的应用中，需要谨慎处理。
学习曲线：对于新手来说，理解MVVM模式及其工作原理可能需要一些时间，尤其是对于那些没有OOP背景的开发者。
视图和模型过于紧密：虽然ViewModel起到了隔离作用，但有时过度依赖数据绑定可能导致视图和模型过于紧密，影响到代码的清晰性。
状态管理：在大型项目中，随着状态的增多，管理ViewModel之间的状态和通信可能会变得复杂，可能需要额外的工具或模式（如Redux或Vuex）来辅助管理。

五、Vue3.0有什么更新？

性能提升：Vue3.0对虚拟DOM（Virtual DOM）的实现进行了重写，称为“Vue3的Proxy-based观测系统”，这使得Vue能够更高效地追踪数据变化，减少了不必要的渲染，从而提高了整体应用性能。此外，Vue3还改进了组件初始化速度，降低了内存占用。
Composition API：Vue3引入了Composition API，这是一种新的编程模型，它允许开发者以更模块化和复用性更高的方式组织代码。Composition API使用setup()函数作为组件入口，替代了传统的Options API，使得逻辑复用和复杂组件的构建更为简便。
改进的Template编译：Vue3优化了模板编译机制，比如通过将作用域插槽（Scoped Slots）改为函数式方式，使得只有当子组件真正需要更新时才重新渲染，避免了不必要的父组件渲染，提高了渲染性能。
Teleport：Vue3新增了组件，允许开发者将组件内容渲染到DOM树中的任意位置，这对于模态框、提示信息等需要脱离当前组件层级的UI元素特别有用。
Tree-shaking：Vue3支持Tree-shaking，意味着在打包过程中可以移除未使用的代码，减小最终的包体积，提高了应用加载速度。
更好的TypeScript支持：Vue3从设计之初就考虑到了TypeScript的支持，提供了更完整的类型定义，使得在使用TypeScript开发Vue应用时体验更加流畅。
Fragment与Suspense：Vue3原生支持组件片段（Fragments），允许一个组件返回多个根节点。同时引入了组件，用于处理异步组件加载或数据获取时的占位符和错误边界。
改进的Reactivity系统：Vue3的响应式系统更加灵活，不仅可以观测对象属性的变化，还能观测数组的变化，以及属性的添加和删除，使得状态管理更加精细和高效。
Router和Vuex的更新：Vue生态系统中的Vue Router和Vuex也针对Vue3进行了更新，提供了更好的性能和更简洁的API。

这些更新体现了Vue3.0在保持原有易用性的同时，对现代前端开发需求的深入洞察和技术创新，旨在帮助开发者构建更强大、更灵活、更高效的Web应用。

六、对虚拟DOM的理解？

概念阐述：虚拟DOM是一种轻量级的内存数据结构，它是真实DOM的一种抽象表示。虚拟DOM使用JavaScript对象树来模拟实际网页的DOM结构，每个对象代表一个真实的DOM节点，包含节点的类型、属性和子节点信息。
工作原理：
- 初始化阶段：当应用启动时，虚拟DOM会首先构建一个与初始UI对应的对象树，这个过程通过JavaScript完成。
- 更新阶段：当应用状态发生变化时，虚拟DOM会迅速重新计算新的UI结构（新的对象树），然后通过高效的算法（如Diff算法）对比新旧虚拟DOM树的差异。
- 渲染阶段：仅将计算出的最小差异应用到实际的DOM上，而非重新渲染整个页面，这样大大减少了DOM操作的次数，提高了页面的更新效率。
优势：
- 性能优化：通过减少实际DOM操作，有效减轻了浏览器渲染负担，提高了页面响应速度。
- 跨平台能力：虚拟DOM作为一层抽象，使得前端框架（如React、Vue）可以更容易地实现跨平台渲染，如在Web、移动应用或服务端渲染。
- 易于调试和测试：虚拟DOM提供了更友好的调试工具，可以追踪状态变化和DOM更新的过程，便于开发者定位问题。
实现思路：虽然虚拟DOM的具体实现细节因框架而异，但核心思想都是利用数据驱动视图的理念，通过对比算法找到最高效的DOM更新策略，以此达到高效更新界面的目的。
与真实DOM的关系：虚拟DOM并不是用来替代真实DOM，而是作为中介层，减少直接操作真实DOM的频率，从而提升应用性能。

总结来说，虚拟DOM是现代前端框架中一项关键技术，它通过在内存中模拟DOM结构，实现了高效、快速的UI更新机制，是提高Web应用性能和开发效率的关键所在。

七、虚拟DOM的解析过程？

创建虚拟节点树（VNode Tree）：
- 应用启动时，首先会根据应用程序的初始状态和模板，使用JavaScript对象来创建虚拟DOM树。每个VNode代表一个DOM节点，包含了标签名（tag）、属性（props）、子节点（children）以及其他元数据。
状态变化监听：
- 当应用状态发生变化时，比如用户交互或数据流更新，框架会监听到这些变化并触发相应的逻辑。
生成新的VNode Tree：
- 根据状态变化，重新计算出一个新的VNode树来反映更新后的UI。这个过程通常通过重新执行组件的渲染函数完成。
差异检测（Diff算法）：
- 新旧两个VNode树被比较，以找出最小的差异集。这个算法比较复杂，但通常遵循一定的规则，如键值对匹配、元素类型比较等，以减少不必要的DOM操作。
批处理更新：
- 找到的差异被收集起来，然后一次性应用到真实DOM树上，而不是立即更新。这种批量更新策略可以减少浏览器渲染的次数，提高性能。
DOM更新：
- 使用收集到的差异列表，只对必要的DOM节点进行操作，如添加、删除或更新节点及其属性。这个过程也被称为“patch”。
渲染：
- 最后，浏览器根据更新后的DOM树重新绘制用户界面，用户看到的是最新的视图。

虚拟DOM的设计目标是通过减少对真实DOM的操作来提高性能，同时提供了一种跨平台和易于维护的状态管理机制。通过这种方式，现代前端框架能够实现高效的UI更新，同时保持应用的响应性和性能。

八、DIFF算法的原理？

DIFF算法是现代前端框架（如React、Vue）中用于高效更新用户界面的关键技术。其核心目的是通过比较新旧两棵虚拟DOM树（VNode Tree），找出两者之间的最小差异，并仅对这些差异部分进行实际DOM操作，从而减少不必要的重渲染，提升性能。DIFF算法的基本原理可以概括为以下几个步骤：

树遍历：
- 首先，算法会遍历新旧两棵虚拟DOM树，从根节点开始，逐层向下比较每个节点。
节点比较：
- 对于每个节点，算法会检查节点的类型（是否为同一类型的元素）、属性（是否有新增、删除或修改的属性）以及文本内容（对于文本节点）。
- 如果节点类型不同，直接替换整个节点。
- 如果节点类型相同，则进一步比较属性和子节点。
复用节点：
- 为了提高效率，如果发现新旧节点的类型相同，并且满足复用条件（如具有唯一key属性），算法倾向于复用旧节点，仅更新必要的属性或子节点，而不是创建全新的DOM节点。
递归比较子树：
- 对于拥有子节点的元素，算法会递归地对子树进行相同的比较过程，直到找到差异或遍历完所有节点。
最小变更策略：
- DIFF算法的核心在于找出最小的变更集，即尽可能减少DOM操作。这通常通过优化的算法实现，比如分层比较、最长递增子序列（LIS）算法等，来快速定位变动。
批量更新：
- 为了进一步提升性能，差异计算完成后，框架通常会批量执行DOM操作，而不是一个接一个地更新，以减少重排和重绘的次数。

组件与通信类

一、slot是什么？有什么作用？原理是什么？

什么是Slot？

概念：slot，中文常译为“插槽”，是Vue提供的一个组件间通信的接口。它允许你在组件内部预留出一块区域，用来放置由父组件决定的内容。通过这种方式，你可以创建高度可复用和灵活的组件。

作用：

组件复用：使组件更加通用，因为具体显示的内容可以由使用组件的父级决定。
内容分发：允许父组件向子组件传递不仅仅是数据，还有实际的DOM结构，增强了组件的可配置性和灵活性。
结构分离：使得组件的结构定义与内容展示分离，有利于组件的模块化和维护。

分类：

默认插槽（Default Slot）：没有指定name属性的，用于放置默认内容。每个组件可以有一个默认插槽。
具名插槽（Named Slots）：通过给指定name属性来定义，允许父组件有选择性地插入内容到特定区域。
作用域插槽（Scoped Slots）：允许子组件向插槽内容传递数据，使得父组件可以访问子组件的数据，增强组件间的数据共享和互动。

原理：

数据绑定和编译：Vue在编译过程中会分析模板中的标签，并在组件渲染时根据父组件传递的内容填充这些插槽。
依赖收集：Vue的响应式系统会跟踪插槽内容中的数据依赖，当这些数据变化时，触发相应的更新。
内容投影：在组件渲染过程中，Vue会将父组件提供的内容“投影”到子组件的位置，实现内容的动态替换。

通过slot机制，Vue使得组件的内部结构可以根据外部环境的变化而灵活调整，大大提升了组件的可复用性和可组合性。

二、组件通信的方式？

Props & $emit：
- Props：父组件向子组件传递数据。父组件通过在子组件标签上定义props属性，子组件通过props选项接收这些属性。
- $emit：子组件向父组件传递信息。子组件内部触发一个事件，并通过this.$ emit('eventName', payload)发出，父组件在使用子组件时，通过监听该事件处理数据或执行相应操作。
Custom Events（自定义事件）：除了使用$emit，Vue还支持自定义事件，用于组件间的兄弟通信。一个组件可以监听另一个组件触发的事件。
Vuex：对于复杂的状态管理，可以使用Vuex。它提供了一个全局的状态存储中心，任何组件都可以获取和修改状态，实现组件间的状态共享。
Event Bus：创建一个事件总线（Event Bus）作为中央通信渠道，用于非父子关系的组件间通信。通过向Event Bus发送事件和监听事件来实现通信。
Provide / Inject：主要用于祖先组件向后代组件注入数据，无需通过中间组件传递props。适用于跨多层的组件通信。
Vue Router的Params、Query和State：在使用Vue Router进行导航时，可以通过路由参数（Params）、查询参数（Query）或路由状态（State）传递信息。
Refs：通过refs可以直接访问子组件的方法或属性，适用于父组件需要直接操作子组件的特殊场景。
Slots & Scoped Slots：Slots用于内容分发，父组件可以向子组件传递自定义内容。Scoped Slots则允许子组件向父组件传递数据，常用于表格、列表等组件的定制化内容展示。
Composition API中的provide/inject（Vue 3）：类似于Options API中的provide/inject，但与Composition API的使用方式更加紧密集成，提供更灵活的数据共享方式。

工程化与实践类

一、Vue 单页应用与多页应用的区别？

结构：
- SPA：整个应用只有一个HTML页面，页面内容通过前端路由和JavaScript动态加载，用户在浏览不同“页面”时，实际上并未发生浏览器的页面跳转，而是通过JavaScript更新DOM来改变视图。
- MPA：每个“页面”对应一个独立的HTML文件，用户在浏览时，浏览器会完整加载新的HTML、CSS和JavaScript资源，每次导航都会进行页面的完全刷新。
导航：
- SPA：使用前端路由（如Vue Router）来处理页面间的导航，无需服务器端的参与，页面切换通常没有明显的加载过程。
- MPA：依赖服务器端的路由，每次导航都会触发HTTP请求，浏览器加载新的页面。
用户体验：
- SPA：由于页面切换快速，没有页面刷新，用户体验通常更流畅，尤其在页面间导航时。但初次加载可能需要加载大量的JavaScript和CSS，导致加载时间较长。
- MPA：每个页面加载速度快，因为只加载当前页面所需资源，但页面间切换会有明显的加载感，用户体验可能不如SPA流畅。
SEO：
- SPA：搜索引擎爬虫通常难以解析JavaScript生成的动态内容，SEO优化相对困难，除非使用服务器端渲染（SSR）或预渲染技术。
- MPA：每个页面都是独立的HTML文件，更容易被搜索引擎抓取，SEO友好。
开发和部署：
- SPA：通常采用模块化开发，组件复用性强，但调试和部署可能涉及更多的前端构建工具和流程。
- MPA：开发和部署相对简单，每个页面独立，但代码重复可能导致维护成本增加。
资源管理：
- SPA：需要管理一个较大的单一应用程序包，可能需要更精细的代码分割和按需加载策略来优化性能。
- MPA：每个页面有自己的资源，资源管理相对独立，但整体加载量可能较大。

根据项目的规模、性能要求、SEO需求以及开发团队的技术栈，开发者会选择适合的架构类型。Vue.js 本身支持构建SPA和MPA，Vue CLI 提供了创建这两种类型项目的模板。

二、Vue的性能优化有哪些？

组件懒加载：使用Vue的异步组件功能或webpack的动态导入特性，按需加载组件，减少初次加载时间。
v-if与v-show的合理使用：
- v-if：适用于条件性渲染，不在DOM中渲染非必需的部分。
- v-show：适用于频繁切换显示状态的元素，因为它只是切换CSS的display属性。
v-for中使用key：为列表中的每一项指定唯一的key属性，帮助Vue更高效地进行DOM的复用和更新。
computed与watch的恰当选择：
- computed：适合计算属性，依赖的数据变化时自动更新，且具有缓存机制。
- watch：用于执行副作用或更复杂的逻辑，当数据变化时执行特定操作。
事件监听的移除：在组件销毁前，确保通过$off移除不必要的事件监听器，避免内存泄漏。
图片懒加载：对于长列表中的图片，使用懒加载技术，仅在图片进入可视区域时加载，提升页面加载速度。
优化无限滚动和长列表：使用虚拟滚动技术（如vue-virtual-scroller库），只渲染可视区域内的列表项，减少DOM节点数量。
避免无用的watcher：注意不要在模板中过度使用复杂的计算表达式，减少不必要的watcher创建。
服务端渲染（SSR）与静态站点生成（SSG）：对于SEO友好和首屏加载速度有高要求的应用，可以考虑使用Vue的Nuxt.js框架进行SSR或SSG。
代码分割与懒加载：利用webpack的code splitting特性，将应用分割成多个chunk，按需加载，减少首屏加载时间。
打包优化：修改vue.config.js配置，关闭生产环境的source map，减少打包体积；使用webpack-bundle-analyzer分析并优化包大小。
避免在Vue实例的data中使用大型对象或数组：大型对象或数组的变更会触发整个视图的重新渲染，可以考虑使用immutable数据或浅拷贝来避免。
使用.v-once指令：对于不会变化的静态内容，使用.v-once指令减少不必要的渲染检查。
优化Vue实例的生命周期钩子：确保在合适的生命周期钩子中执行资源密集型操作，比如在mounted而非created中进行DOM操作。
状态管理优化：如果使用Vuex，确保状态树尽可能扁平化，合理使用getters来缓存计算结果，减少不必要的状态更新和getter调用。

三、对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（Single Page Application）单页面应用是一种现代Web应用程序的设计模式，用户在整个使用过程中，浏览器只加载一次页面，后续的导航和交互都在同一页面内完成，无需重新加载整个页面。SPA通过JavaScript和AJAX技术实现页面内容的动态更新，提供类似桌面应用的用户体验。

优点：

更好的用户体验：由于页面无需完全刷新，页面间的切换更流畅，减少了加载时间和“闪烁”现象。
前后端分离：前端负责视图展示，后端负责数据处理，职责明确，有利于前后端开发的并行进行。
性能优化：通过缓存和按需加载，减少了HTTP请求，降低了服务器压力。
易于测试和调试：SPA的结构清晰，有利于自动化测试和使用浏览器开发者工具进行调试。
更好的路由管理：通过客户端路由，可以实现URL与页面状态的一一对应，方便用户书签和分享。

缺点：

首屏加载时间：初始加载时需要加载大量JavaScript和资源，可能导致页面加载较慢。
SEO问题：搜索引擎爬虫通常不执行JavaScript，导致SEO困难，但可以通过服务器端渲染（SSR）或预渲染（Prerendering）来改善。
历史记录和回退问题：需要手动管理浏览器的历史记录，确保用户可以正确回退。
缓存策略：由于页面不刷新，缓存管理变得复杂，需要确保更新的内容正确呈现。
复杂性增加：随着应用规模扩大，代码组织和维护的复杂度会增加，需要更高级的架构设计和状态管理。

在实际项目中，开发者需要根据业务需求和目标受众来权衡这些优缺点，选择是否采用SPA架构。对于需要快速响应和高度互动的Web应用，SPA通常是一个很好的选择。而对于SEO非常重要或者对首屏加载时间要求严格的网站，可能需要考虑其他策略。

四、vue初始化页面闪动问题？

使用v-cloak指令：Vue提供了一个v-cloak指令，可以用来隐藏带有Vue模板语法的元素，直到Vue实例编译完成。在CSS中定义[v-cloak]的样式为display: none;，这样页面加载时带有v-cloak的元素会被隐藏，直到Vue编译完毕。

   <div v-cloak>{{ message }}</div>

   /* CSS */
   [v-cloak] {
     display: none;
   }

CSS动画或transition：通过设置一个短暂的加载遮罩或使用CSS的opacity过渡效果，可以在Vue渲染完成前遮盖页面内容，待渲染完成后移除遮罩或改变透明度，达到平滑过渡的效果。
路由懒加载：在使用Vue Router时，通过路由懒加载技术可以按需加载组件，减少首屏加载时间，间接减少闪动现象。
服务器端渲染（SSR）：采用服务器端渲染可以预先渲染好HTML页面再发送给客户端，用户首先看到的是完全渲染的页面，之后Vue接管并增强交互性，有效避免白屏或闪动。
优化首屏加载速度：通过代码拆分、资源压缩、异步加载等手段加快首屏内容的加载速度，减少用户感受到的等待时间。
优化首屏加载速度：通过代码拆分、资源压缩、异步加载等手段加快首屏内容的加载速度，减少用户感受到的等待时间。
确保数据预加载或初始化：在Vue实例挂载前确保必要的数据已经准备好，避免因数据延迟加载导致的视图重绘。

路由类

一、路由的hash和history模式的区别？

Hash模式：

URL结构：URL中包含#符号，如example.com/#/path。
浏览器行为：#后的部分不会被发送到服务器，因此改变hash不会引起页面的重新加载。
事件监听：使用window.onhashchange事件监听hash的变化。
兼容性：广泛支持，包括低版本的IE浏览器，无需后端配合即可工作。
局限性：hash值不能改变URL的其他部分，如主机名和路径，且在URL中显眼，不够美观。

History模式（HTML5 History API）：

URL结构：没有#，看起来像标准的服务器端渲染的URL，如example.com/path。
浏览器行为：使用pushState和popState方法改变URL，页面不会重新加载，但需要后端支持，以处理直接访问这些URL的请求。
事件监听：监听popstate事件来处理浏览器的前进和后退操作。
兼容性：需要HTML5 History API支持，意味着较低版本的浏览器可能不支持。
优点：提供更自然的URL，易于理解和分享，且可以利用服务器的缓存策略。

二、 $route 和$ router 的区别？

$route:

用途：$route 是一个反应式对象，用于获取当前路由的状态信息。它包含了当前URL解析得到的信息，如路径（path）、查询参数（query）、参数（params）、哈希（hash）等。
功能：主要用于读取路由信息，如在组件内部根据路由参数来决定渲染逻辑，或者监控路由变化（通过watch监听$route的变化）。
访问方式：在Vue组件内部直接可用，无需额外导入。

$router:

用途：$router 是Vue Router的实例，提供了操作路由的功能。它包含了所有路由的配置信息以及进行导航的方法。
功能：包括但不限于导航到不同的URL（如 $router.push()、$ router.replace()）、获取当前路由器的实例配置、添加路由守卫（如全局前置守卫beforeEach）、以及管理路由历史（如$router.go()）。
访问方式：通常在Vue实例中通过注入的方式使用，或者在路由配置文件中直接操作。

总结：

本质区别： $route关注于当前路由的状态信息，是只读的；而$ router关注于路由的操控和管理，可以用来实现页面间的导航和路由状态的改变。
使用场景：当你需要根据当前路由信息展示不同内容时，使用 $route；当你需要控制页面跳转或添加路由守卫等功能时，使用$ router。

vue面试题