奔跑吧铁蛋
18线小前端
|
一家不知名的小公司
获得徽章 7
- #每天一个知识点# day21
vue数据控制视图原理：
1、Vue 中的数据绑定是通过指令（例如 v-model、v-bind）或插值表达式（{{}}）实现的。当数据发生变化时，Vue 会自动检测到数据的变化，并更新相应的视图。
2、在 Vue 的内部，它使用了一个称为"响应式系统"的机制来管理数据和视图之间的关系。当我们将数据对象传递给 Vue 实例时，Vue 会遍历这个对象的所有属性，并使用 Object.defineProperty() 方法来将这些属性转换为"响应式属性"。
3、每个响应式属性都会被附加上 getter 和 setter 方法。当访问这些属性时，getter 方法会被调用，Vue 将追踪该属性的依赖关系，确保在属性变化时能够通知相关的视图进行更新。当修改属性的值时，setter 方法会被调用，触发视图的重新渲染。
4、Vue 还提供了一些辅助工具，比如计算属性和侦听器，以帮助开发者更方便地处理数据变化。计算属性允许我们定义一些根据其他数据计算得出的属性，而侦听器则可以监听数据的变化并执行相应的回调函数。
总结来说，Vue 通过使用响应式系统来实现数据和视图之间的绑定关系。当数据发生变化时，Vue 会自动更新相关的视图，使界面始终保持同步和一致。这种数据驱动的方式使得开发者能够更专注于数据的处理和业务逻辑，而无需手动操作 DOM 元素。展开赞过 评论2 - #每天一个知识点# day20
Vite 的开发构建原理和概念：
1、快速冷启动（Fast Cold Start）：Vite 的开发服务器利用浏览器原生的 ES 模块支持，无需事先打包整个项目，而是按需编译和提供模块。这样可以实现快速的冷启动时间，加快开发者在浏览器中看到修改结果的速度。
2、HMR（热模块替换）：Vite 使用了热模块替换技术，即在开发过程中，只重新加载有变化的模块，而不是整个页面。这样可以实时响应代码的修改，同时保持应用程序的状态。HMR 可以大幅提高开发效率，避免了手动刷新页面和重新初始化的麻烦。
3、基于依赖图的构建（Dependency Graph）：Vite 通过解析项目的源码，构建一个基于依赖关系的虚拟文件系统。这个依赖图跟踪模块之间的导入关系，并将每个模块及其依赖作为一个资源进行处理。这种方式使得 Vite 能够精确地知道哪些模块需要被编译和加载。
4、预编译（Pre-bundling）：在生产环境中，Vite 可以通过预编译将项目中的源码转换为优化后的静态文件。这个过程使用 Rollup 进行高效的代码转换和压缩，同时保留了按需加载的特性，减小了生成的代码体积，并提供更好的性能。
5、插件系统（Plugin System）：Vite 提供了灵活且易于扩展的插件系统，可以根据需要自定义开发流程和构建行为。插件可以用于添加新的功能、优化打包结果、处理文件等任务。开发者可以利用插件系统来满足特定项目的需求和优化要求。展开赞过 评论2 - #每天一个知识点# day18
Vue.js中的MVVM设计概念：
1、Model（模型）：数据层的表示，包括应用程序的业务数据和状态。在Vue.js中，通常使用JavaScript对象来表示数据模型。
2、View（视图）：用户界面的展示部分，由HTML模板构建，可通过Vue.js提供的指令进行扩展。视图负责显示数据以及响应用户的操作。
3、ViewModel（视图模型）：Vue.js中的核心概念，作为View和Model之间的中间层。它是一个Vue实例，持有视图需要的数据和逻辑，并且通过数据绑定将视图与数据模型进行连接。
4、数据绑定（Data Binding）：Vue.js提供了强大的数据绑定机制，使得View和ViewModel之间能够自动保持同步。当ViewModel中的数据发生变化时，相关的视图会自动更新；而用户对视图的操作也可以直接反映到ViewModel中的数据上。
5、指令（Directives）：Vue.js的指令是一种特殊的DOM属性，用于实现视图的交互和动态渲染。指令可以通过ViewModel中的数据来改变DOM的状态、样式或内容。
6、计算属性（Computed Properties）：Vue.js允许在ViewModel中定义计算属性，这些属性的值是根据其他数据的值动态计算而来。计算属性可以简化模板中的复杂逻辑，提高代码的可读性和维护性。展开赞过 评论3 - #每天一个知识点# day17
浏览器缓存机制分为两种类型：强缓存和协商缓存。
1、强缓存：当浏览器发起请求时，先检查本地缓存是否存在该资源的缓存副本，并根据一定的规则判断是否可用。如果可用且尚未过期，则直接从缓存中读取资源，而不发送请求到服务器。常用的实现方式有两种：
· Expires：服务器在响应头中返回一个过期时间，浏览器会在下次请求时判断当前时间与过期时间的对比来决定是否使用缓存。
· Cache-Control：通过设置Cache-Control响应头来指定资源的缓存策略，常见的值有max-age（缓存有效期秒数）和no-cache（每次都向服务器验证缓存）等。
2、协商缓存：如果强缓存失效（即资源已过期），浏览器将向服务器发送请求，并带上上一次请求时服务器返回的相关信息（如ETag或Last-Modified）。服务器收到请求后，根据这些信息判断资源是否发生了变化。如果没有变化，服务器返回304 Not Modified的响应状态码，告诉浏览器可以使用本地缓存副本。常用的实现方式有两种：
· ETag（Entity Tag）：服务器在响应头中返回一个唯一标识符，用于表示资源的版本信息。浏览器在后续请求时将该标识符发送到服务器进行验证。
· Last-Modified：服务器在响应头中返回资源的最后修改时间。浏览器在后续请求时将该时间发送到服务器进行验证。展开赞过 评论2 - #每天一个知识点# day16
在Vuex中，有几个核心状态对象：
1、state（状态）：它是存储应用程序数据的单一源。在Vuex中定义的状态通过该对象进行访问。State是响应式的，当其变化时，相关组件将自动更新。
2、getters（获取器）：它类似于计算属性，用于派生出一些衍生状态。Getter函数接收state作为第一个参数，并可使用其它getters`作为第二个参数。它们提供了一种缓存计算结果的方式，只有当依赖的状态变化时，才会重新计算。
3、mutations（突变）：它是唯一可以修改state的地方。每个突变都是一个函数，接收一个state对象作为参数，可以通过调用这些函数来更改状态。突变必须是同步的，以确保在跟踪状态变化时不会产生问题。
4、actions（操作）：它用于处理异步操作或批量的变。Action函数可以触发 mutations 来修改状态，并可以包含任意异步操作。Actions接收一个包含commit和dispatch方法的上下文对象作为参数，允许它们触发突变或调度其他操作。
除了上述四个核心状态对象，还有两个附加的API：
5、modules（模块）：它允许将state、getters、mutations和actions分割为模块，便于管理大型应用程序的状态。每个模块都拥有自己的state、getters、mutations和actions。
6、plugins（插件）：它是一种扩展Vuex功能的机制。通过插件，可以订阅 mutation 的变化、记录日志、持久化状态等。插件是用来扩展Vuex功能的可插入接口。
这些对象构成了Vuex的核心概念，协同工作以管理和维护Vue应用程序的状态。展开等人赞过 评论4 - #每天一个知识点# day 15
Promise：
1、Promise有三个状态：待定（pending）、已兑现（fulfilled）和已拒绝（rejected）。当一个Promise刚创建时，它处于待定状态。当异步操作成功完成时，Promise会变为已兑现状态，并且可以通过then()方法来处理结果。当异步操作失败时，Promise会变为已拒绝状态，并且可以通过catch()方法来处理错误。
2、使用Promise可以避免回调地狱（callback hell），使代码更具可读性和可维护性。可以通过链式调用then()方法，将多个异步操作按顺序执行，并处理每个操作的结果。还可以使用Promise.all()方法来等待多个异步操作全部完成。展开赞过 评论3 - #每天一个知识点# day 14
可以让元素居中的方法：
1、水平居中：使用margin属性和auto值来实现，设置左右边距为auto，并将元素宽度设置为固定值或者百分比。
2、使用flex布局，设置父元素display:flex，并使用align-items:center和justify-content:center属性来让子元素垂直和水平都居中。
3、使用绝对定位，将元素的top和left属性都设置为50%，然后再使用负的margin值将元素向上和向左移动自身高度和宽度的一半。
4、居中多个元素：在父元素上应用以上任意一个方法，在子元素上使用适当的布局和间距样式。展开赞过 12 - #每天一个知识点# day 13
浅分享下webpack 打包原理：
1、识别入口文件：webpack 通过配置文件或命令行参数指定项目中的一个或多个入口文件。
解析依赖关系：从入口文件开始，webpack 分析出所有需要打包的文件，并建立起它们之间的依赖关系图（dependency graph）。
2、加载模块：webpack 根据依赖关系图，将每个模块加载到内存中，可能会涉及到文件系统读取、网络请求等操作。
3、转换代码：对于不同类型的模块，webpack 可以使用不同的 loader 进行转换。例如，对于 CSS 文件可以使用 css-loader 进行解析和处理。
3、执行插件：在打包过程中，webpack 还提供了许多插件，用于完成各种任务，例如压缩代码、拷贝资源文件等等。
5、输出打包结果：最后，webpack 会根据配置生成一个或多个输出文件，通常是 JavaScript 文件（或者其他静态资源文件），这些文件包含了最终的经过处理的代码。
6、webpack 的特点之一是可扩展性，开发者可以通过编写自己的 Loader 和 Plugin 来实现更加自定义化的打包流程。展开等人赞过 评论8
