面试题记录
面试题记录
-
- 一.Vue中的合成事件和原生事件有哪些区别。
- 二.parseint(3,2)返回什么值？为什么
- 三.什么是闭包
- 四.vue3和vue2区别有哪些
- 五.vue3 响应式原理 双向绑定原理
-
- 1. 响应式原理：
- 2. 双向绑定原理：
-
- Vue3 中双向绑定的原理：
- 下面是 Vue2 中双向绑定的完整图解：
- 六. vue 如何优化首页加载速度
- 七. 从浏览器输入URL到页面渲染的过程主要包括以下几个步骤：
- 八.webpack打包流程图
- 九.vuex 工作流程
一.Vue中的合成事件和原生事件有哪些区别。
-
触发方式：合成事件是由Vue框架封装的，通过绑定在Vue组件的事件指令上来触发，例如
@click、@input等。而原生事件是直接通过DOM元素上的事件监听器来触发，例如addEventListener。 -
事件对象：合成事件中的事件对象是Vue框架自己创建的，它是对原生事件对象的封装，提供了一些额外的属性和方法。而原生事件中的事件对象是浏览器提供的，具有浏览器原生的属性和方法。
-
跨平台兼容性：合成事件是Vue框架对不同浏览器的事件处理逻辑进行统一封装，使得开发者不需要关心浏览器兼容性问题。而原生事件需要开发者自己处理跨浏览器的兼容性问题。
-
性能优化：合成事件经过Vue框架的优化处理，可以提高性能。Vue会对事件进行批量处理，减少不必要的重绘和重排操作。而原生事件没有经过Vue的优化处理，可能会导致性能问题。
总的来说，合成事件相对于原生事件更加方便和易用，尤其在Vue组件中使用时更为常见。但在某些特殊情况下，如果需要更精细的控制或处理跨浏览器兼容性问题，可以使用原生事件。
二.parseint(3,2)返回什么值？为什么
parseInt(3, 2)会将字符串"3"按照进制数2进行解析。
在进制数为2的情况下，只能使用0和1来表示数字。而字符串"3"中包含的字符"3"并不是有效的二进制数字，因此解析失败，parseInt会返回NaN。
如果你想将字符串"3"解析为整数，可以使用parseInt("3")，它会使用默认的十进制进行解析，返回结果为3。
三.什么是闭包
闭包是指在函数内部定义的函数，并且可以访问外部函数的变量和参数。
闭包可以保留外部函数的状态，使得函数可以继续操作外部函数的局部变量，即使外部函数已经执行完毕。闭包可以实现某些特殊的功能，如函数工厂、函数记忆等。在JavaScript中，闭包是一种常见的编程方式。
四.vue3和vue2区别有哪些
Vue 3相对于Vue 2有一些重要的区别和改进：
-
性能提升：Vue 3在内部进行了重写和优化，提供了更好的性能。新的响应式系统使用了Proxy代理对象，取代了Vue 2中的Object.defineProperty，使得数据响应式更新更高效。
-
更小的体积：Vue 3通过优化和摇树优化（tree shaking）等方式，减少了打包后的文件体积，提供了更小的文件大小。
-
Composition API：Vue 3引入了Composition API，它允许开发者通过逻辑组合的方式组织和重用组件逻辑。相比Vue 2中的Options API，Composition API提供了更灵活和可组合的方式来编写组件。
-
Teleport：Vue 3引入了Teleport（传送门）功能，它可以将组件的内容渲染到DOM结构的不同位置，使得组件的渲染更加灵活和可控。
-
Fragment：Vue 3引入了Fragment（片段）功能，它允许组件返回多个根元素，而不需要包裹在一个额外的父元素中。
-
更好的TypeScript支持：Vue 3对TypeScript的支持更加完善，包括更准确的类型推断、更好的编辑器支持和更好的错误提示。
-
其他改进：Vue 3还包括了其他一些改进，如更好的响应式API、更好的虚拟DOM算法等，提供了更好的开发体验和更高的性能。
五.vue3 响应式原理 双向绑定原理
Vue 3响应式原理和双向绑定原理是Vue框架中的核心概念之一。下面我会为您解释这两个概念，并附上相应的图解。
1. 响应式原理：
Vue 3使用了一种称为"Proxy"的新特性，来实现响应式原理。在Vue 2中，使用的是"Object.defineProperty"来追踪属性的变化。而在Vue 3中，通过Proxy可以更加直接和细粒度地进行属性的追踪。
当我们将一个对象传递给Vue的响应式系统时，Vue会使用Proxy来监听该对象。一旦对象的属性发生变化，Vue会立即检测到并触发相应的更新。这意味着我们可以在Vue的模板中使用这些属性，当属性变化时，模板也会相应地被更新。
下面是一个图示，展示了Vue 3响应式原理的流程：
+-------------------+
| |
| Template |
| |
+-------------------+
|
V
+--------------+ +--------------------------+
| | 1. Update | |
| Object |<-----------+ | Vue Reactive |
| | 2. Notify | |
+--------------+ +--------------------------+
|
V
+-------------------+
| |
| DOM |
| |
+-------------------+
完整图解 包括数据更新 视图更新的图解
下面是一个更完整的图示，展示了 Vue3 响应式原理中数据更新和视图更新的过程：
+------------------+
| Normal Object |
+------------------+
|
|
v
+------------------+
| Proxy Object |
+------------------+
|
|
v
+-------------------------------+
| Reactive System |
+-------------------------------+
| |
| +-------------+ |
| | Dependency | |
| | Tracking | |
| +-------------+ |
| | |
| | |
| v |
| +-------------+ |
| | Dependency | |
| | Collection| |
| +-------------+ |
| | |
| | |
| v |
| +-------------+ |
| | Update | |
| | Trigger | |
| +-------------+ |
| | |
| | |
| v |
| +-------------+ |
| | View | |
| | Update | |
| +-------------+ |
| |
+-------------------------------+
在这个图示中，我们可以看到完整的响应式系统包括以下几个步骤：
-
创建一个普通对象，并将其转换为 Proxy 对象。Proxy 对象用于拦截属性的访问和修改操作。
-
当我们访问 Proxy 对象的属性时，会触发 Dependency Tracking（依赖追踪）的过程。这时，系统会记录当前正在执行的副作用函数，并将其添加到属性的依赖集合中。
-
在 Dependency Collection（依赖收集）的过程中，系统会将副作用函数添加到属性的依赖集合中。这里使用了 Map 来存储属性的依赖集合，其中键是属性名，值是一个 Set 集合，用于存储依赖的副作用函数。
-
当属性发生变化时，系统会触发 Update Trigger（更新触发）的过程。这时，系统会遍历属性的依赖集合，通知相关的副作用函数进行更新。
-
在 View Update（视图更新）的过程中，相关的副作用函数会重新执行，从而更新视图。
通过这些步骤的协作，Vue3 的响应式系统能够实现对对象属性的监听和追踪，当属性变化时，会自动触发相应的更新操作，保持视图与数据的同步。
2. 双向绑定原理：
Vue3 的双向绑定原理与 Vue2 相比有一些不同之处。下面是一个完整的图示，展示了
Vue3 中双向绑定的原理：
User Input View Update
+-----+ +--------+
| | | |
| | | |
v | v |
+--------------+ | +--------------+ |
| Template | | | Reactive | |
| (Declarative) | | System | |
| | | | | |
+--------------+ | +--------------+ |
^ | | |
| | | |
| | | |
Data Flow | +-----------+ |
| |
| |
v |
+--------------+ |
| State | |
| (Reactive) | |
| | |
+--------------+ |
|
|
Data Flow |
|
|
v
+-----------------------------------+
| View |
| (Rendered HTML) |
| |
+-----------------------------------+
在这个图示中，我们可以看到双向绑定的过程：
-
在模板中，我们通过指令或插值表达式将数据和视图关联起来。用户可以通过输入框等交互元素改变数据。
-
用户的输入会通过数据流（Data Flow）进入到数据状态（State）中。这里的数据状态是响应式的对象，内部使用了 Vue3 的响应式系统。
-
在数据状态中，数据的变化会触发 Reactive System（响应式系统）中的监听机制。此时，系统会追踪变化的数据并通知相关的副作用函数进行更新。
-
更新的副作用函数会负责更新视图。通过重新执行模板中的渲染函数，视图将会被更新以反映最新的数据状态。
-
反过来，当视图发生变化时，通过双向绑定的机制会更新数据状态。这样，用户的输入和数据状态之间就建立了一个双向的绑定关系。
通过这个双向绑定的机制，Vue3 实现了视图和数据的自动同步，使得当用户输入或数据状态发生变化时，视图和数据能够保持一致。这大大简化了开发过程，提高了开发效率。
下面是 Vue2 中双向绑定的完整图解：
User Input View Update
+-----+ +--------+
| | | |
| | | |
v | v |
+--------------+ | +--------------+ |
| Template | | | Observer | |
| (Declarative) | | (Reactivity) | |
| | | | | |
+--------------+ | +--------------+ |
^ | | |
| | | |
| | | |
Data Flow | +-----------+ |
| |
| |
v |
+-----------------------------------+
| View |
| (Rendered HTML) |
| |
+-----------------------------------+
在这个图示中，我们可以看到双向绑定的过程：
-
在模板中，我们通过指令或插值表达式将数据和视图关联起来。用户可以通过输入框等交互元素改变数据。
-
用户的输入会通过数据流（Data Flow）进入到数据模型中。数据模型是一个普通的 JavaScript 对象。
-
在数据模型中，我们使用 Observer（观察者）模式来监听数据的变化。当数据发生变化时，观察者会通知相关的订阅者进行更新。
-
订阅者负责更新视图。通过重新执行模板中的渲染函数，视图将会被更新以反映最新的数据状态。
-
反过来，当视图发生变化时，通过双向绑定的机制会更新数据模型。这样，用户的输入和数据模型之间就建立了一个双向的绑定关系。
通过这个双向绑定的机制，Vue2 实现了视图和数据的自动同步，使得当用户输入或数据模型发生变化时，视图和数据能够保持一致。然而，Vue2 的双向绑定是基于 Object.defineProperty() 来实现的，需要对数据进行劫持和监听，因此在性能上有一定的开销。而在 Vue3 中，使用了 Proxy 对象来实现响应式系统，性能更高效。
六. vue 如何优化首页加载速度
要优化Vue的首页加载速度和项目性能，可以采取以下几个步骤：
-
代码压缩和打包：使用工具（如Webpack）对代码进行压缩和打包，减小文件大小，提高加载速度。
-
使用异步组件：将页面中的组件按需加载，而不是一次性加载所有组件，可以减少初始加载时间。
-
路由懒加载：将路由按需加载，只在需要时加载对应的组件，可以减少初始加载时间。
-
图片懒加载：将图片的加载延迟到图片即将进入可视区域时再加载，可以减少初始加载时间。
-
使用CDN加速：将静态资源（如CSS、JS文件）部署到CDN上，可以加快资源加载速度。
-
代码拆分：将大型的代码块拆分成小的模块，按需加载，提高页面渲染速度。
-
使用缓存：合理利用浏览器缓存机制，将一些静态资源缓存到本地，减少重复加载。
-
优化网络请求：减少HTTP请求次数，合并请求，使用HTTP缓存等方式来优化网络请求。
-
使用Vue的生命周期钩子函数：合理使用Vue的生命周期钩子函数，可以在适当的时机进行一些操作，如数据的预加载等。
-
优化渲染性能：避免在模板中使用复杂的表达式和计算，减少虚拟DOM的生成和比对的次数，提高页面渲染性能。
七. 从浏览器输入URL到页面渲染的过程主要包括以下几个步骤：
-
DNS解析：浏览器根据URL中的域名，向DNS服务器查询该域名对应的IP地址。
-
建立TCP连接：浏览器与服务器建立TCP连接，进行数据传输。
-
发送HTTP请求：浏览器向服务器发送HTTP请求，请求页面的HTML文件。
-
服务器处理请求：服务器接收到请求后，进行处理，生成HTML文件。
-
返回响应：服务器将生成的HTML文件作为HTTP响应返回给浏览器。
-
解析HTML：浏览器解析HTML文件，构建DOM树。
-
加载资源：浏览器根据HTML文件中的链接标签（如CSS、JS文件等），向服务器发送请求，加载对应的资源文件。
-
渲染页面：浏览器根据DOM树和CSS样式，进行页面渲染，将页面呈现给用户。
在这个过程中，可以通过优化网络请求、资源加载、渲染性能等方面来提高页面加载速度和性能。
以下是一些通过优化网络请求、资源加载和渲染性能来提高页面加载速度和性能的方法：
-
减少HTTP请求次数：合并和压缩CSS和JavaScript文件，使用CSS Sprites来减少图片请求次数，减少页面中的外部资源加载。
-
使用CDN加速：将静态资源（如图片、CSS、JavaScript文件）部署到CDN上，利用CDN的分布式网络来加速资源的传输。
-
使用缓存：合理设置缓存策略，将静态资源缓存到本地，减少重复加载。可以使用HTTP的缓存机制，或者通过使用localStorage或sessionStorage来缓存数据。
-
延迟加载：对于非关键内容，可以使用懒加载技术，延迟加载图片、视频等资源，当用户滚动到需要显示的区域时再加载。
-
使用异步加载：对于不影响页面渲染的资源，如统计代码、广告等，可以使用异步加载，不阻塞页面的加载和渲染。
-
压缩资源文件：压缩CSS和JavaScript文件，减小文件大小，提高加载速度。可以使用工具（如Webpack）进行压缩和打包。
-
使用图片压缩：对于图片资源，可以使用压缩工具（如TinyPNG）来减小文件大小，提高加载速度。
-
使用浏览器缓存：合理设置HTTP响应头中的缓存相关字段，利用浏览器缓存来减少请求和传输时间。
-
优化渲染性能：避免在模板中使用复杂的表达式和计算，减少虚拟DOM的生成和比对的次数，提高页面渲染性能。
-
使用Vue的异步组件和路由懒加载：按需加载组件和路由，减少初始加载时间。
-
延迟执行JavaScript：将不必要的JavaScript代码延迟执行，优先加载和渲染页面的关键内容。
-
使用gzip压缩：服务器端开启gzip压缩，减小传输文件大小。
通过以上优化措施，可以有效减少网络请求次数、减小文件大小、利用缓存等方式来提高页面加载速度和性能。
八.webpack打包流程图
下面是一个更完整的Webpack打包过程图解，包含了更多的细节步骤和插件：
+---------------+
| 入口文件 |
| (entry) |
+---------------+
|
|
V
+-----------------+
| 加载器处理 |
| (Loaders) |
+-----------------+
|
|
V
+---------------------+
| 依赖解析 |
| (Dependency |
| Resolution) |
+---------------------+
|
|
V
+--------------------+
| 模块加载 |
| (Module |
| Loading) |
+--------------------+
|
|
V
+----------------+
| 代码转换 |
| (Code |
| Transformation)|
+----------------+
|
|
V
+-------------------+
| 依赖图构建 |
| (Dependency |
| Graph |
| Construction) |
+-------------------+
|
|
V
+--------------------+
| 模块编译 |
| (Module |
| Compilation) |
+--------------------+
|
|
V
+---------------+
| 打包输出 |
| (Bundle |
| Output) |
+---------------+
这个完整的Webpack打包过程图与简化版的图相似，但更详细地展示了各个步骤之间的关系，并添加了"加载器处理"（Loaders）步骤。加载器用于在模块加载前对文件进行预处理，以支持更多类型的文件和语法。除了加载器处理，其他的步骤和插件都在流程图中得到了更明确的展示。
需要注意的是，Webpack的打包过程非常灵活，并且可以通过配置文件自定义和扩展。因此，具体的打包过程可能会因为项目的需求而有所差异。然而，流程图中展示的是Webpack的基本打包过程，可以作为理解Webpack的起点。
九.vuex 工作流程
Vuex 是 Vue.js 的官方状态管理库，它用于管理应用程序的状态。下面是 Vuex 的工作流原理：
-
在 Vuex 中，我们首先定义一个状态树（State Tree），它是一个包含所有应用程序级别状态的对象。状态树可以被认为是应用程序的单一数据源。
-
在状态树中，我们可以定义多个模块（Modules），每个模块负责管理特定的状态。模块可以嵌套，形成一个层级关系。
-
在模块中，我们定义了状态（State），它是我们要管理的数据。状态可以通过 Vuex 提供的辅助函数进行访问和修改。
-
当需要修改状态时，我们使用 Mutations（变更）来进行同步修改。Mutations 是一个纯函数，它接收一个状态对象和一个负载（Payload），并对状态进行同步修改。
-
为了实现异步操作，我们可以使用 Actions（动作）。Actions 接收一个上下文对象（Context），它包含了与 Mutations 类似的方法，但可以进行异步操作。在 Actions 中，我们可以执行异步任务，然后再通过提交 Mutations 来修改状态。
-
当状态发生变化时，我们可以使用 Getters（获取器）来派生出新的状态。Getters 是一个类似于计算属性的概念，它可以对状态进行一些计算和过滤，然后返回一个新的派生状态。
-
最后，我们可以通过订阅 Store 的变化来响应状态的变化。当状态发生变化时，我们可以执行一些副作用操作，比如更新视图或触发其他逻辑。
通过这个工作流，Vuex 提供了一种统一的方式来管理应用程序的状态。它使得状态的变化更加可追踪和可预测，同时也提供了一些方便的工具和辅助函数来简化状态的管理和操作。
以下是一个简单的图解，展示了 Vuex 的工作流原理：
+----------------------------------+
| |
| Vue Components |
| |
+----------------------------------+
| ^
| |
v |
+----------------------------------+
| |
| Actions & Getters |
| |
+----------------------------------+
| ^
| |
v |
+----------------------------------+
| |
| Mutations |
| |
+----------------------------------+
| ^
| |
v |
+----------------------------------+
| |
| State |
| |
+----------------------------------+
在这个图示中，我们可以看到 Vuex 的工作流程：
-
Vue 组件是应用程序的界面部分，它们可以通过读取和修改状态来与用户进行交互。
-
Actions 和 Getters 是用于处理异步操作和派生状态的函数。Actions 可以执行异步任务，并通过提交 Mutations 来修改状态。Getters 可以对状态进行计算和过滤，然后返回一个新的派生状态。
-
Mutations 是用于同步修改状态的函数。它接收一个状态对象和一个负载（Payload），并对状态进行同步修改。
-
State 是我们要管理的数据。它包含了应用程序的所有状态，并可以通过 Vuex 提供的辅助函数进行访问和修改。
通过这个工作流，Vuex 提供了一种统一的方式来管理应用程序的状态。它使得状态的变化更加可追踪和可预测，同时也提供了一些方便的工具和辅助函数来简化状态的管理和操作。