BlogMind

地址栏输入 URL 敲下回车后发生了什么? 一、简单分析简单的分析，从输入 URL到回车后发生的行为如下： URL解析 DNS 查询 TCP 连接 HTTP 请求 响应请求 页面渲染 二、详细分析URL解析首先判断你输入的是一个合法的 URL 还是一个待搜索的关键词，并且根据你输入的内容进行对应操作 URL的解析第过程中的第一步，一个url的结构解析如下： DNS查询在之前文章中讲过DNS的查询，这里就不再讲述了 整个查询过程如下图所示： 最终，获取到了域名对应的目标服务器IP地址 TCP连接在之前文章中，了解到tcp是一种面向有连接的传输层协议 在确定目标服务器服务器的IP地址后，则经历三次握手建立TCP连接，流程如下： 发送 http 请求当建立tcp连接之后，就可以在这基础上进行通信，浏览器发送 http 请求到目标服务器 请求的内容包括： 请求行 请求头 请求主体 响应请求当服务器接收到浏览器的请求之后，就会进行逻辑操作，处理完成之后返回一个HTTP响应消息，包括： 状态行 响应头 响应正文 在服务器响应之后，由于现在http默认开始长连接ke ...

HTTP1.0/1.1/2.0 的区别? 一、HTTP1.0HTTP协议的第二个版本，第一个在通讯中指定版本号的HTTP协议版本 HTTP 1.0 浏览器与服务器只保持短暂的连接，每次请求都需要与服务器建立一个TCP连接 服务器完成请求处理后立即断开TCP连接，服务器不跟踪每个客户也不记录过去的请求 简单来讲，每次与服务器交互，都需要新开一个连接 例如，解析html文件，当发现文件中存在资源文件的时候，这时候又创建单独的链接 最终导致，一个html文件的访问包含了多次的请求和响应，每次请求都需要创建连接、关系连接 这种形式明显造成了性能上的缺陷 如果需要建立长连接，需要设置一个非标准的Connection字段 Connection: keep-alive 二、HTTP1.1在HTTP1.1中，默认支持长连接（Connection: keep-alive），即在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟 建立一次连接，多次请求均由这个连接完成 这样，在加载html文件的时候，文件中多个请求和响应就可以在一个连接中传输 同 ...

一、实例和组件定义data的区别vue实例的时候定义data属性既可以是一个对象，也可以是一个函数 12345678910111213const app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } }}) 组件中定义data属性，只能是一个函数 如果为组件data直接定义为一个对象 123456Vue.component('component1',{ template:`<div>组件</div>`, data:{ foo:"foo" }}) 则会得到警告信息 警告说 ...

一、是什么diff 算法是一种通过同层的树节点进行比较的高效算法 其有两个特点： 比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较 diff 算法在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较 二、比较方式diff整体策略为：深度优先，同层比较 比较只会在同层级进行, 不会跨层级比较 比较的过程中，循环从两边向中间收拢 下面举个vue通过diff算法更新的例子： 新旧VNode节点如下图所示： 第一次循环后，发现旧节点D与新节点D相同，直接复用旧节点D作为diff后的第一个真实节点，同时旧节点endIndex移动到C，新节点的 startIndex 移动到了 C 第二次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理，diff 后创建了 C 的真实节点插入到第一次创建的 D 节点后面。同时旧节点的 endIndex 移动到了 B，新节点的 startIndex 移动到了 E 第三次循环中，发现E没有找到，这时候只能直接创建新的真实节点 E，插入到第二 ...

一、什么是指令开始之前我们先学习一下指令系统这个词 指令系统是计算机硬件的语言系统，也叫机器语言，它是系统程序员看到的计算机的主要属性。因此指令系统表征了计算机的基本功能决定了机器所要求的能力 在vue中提供了一套为数据驱动视图更为方便的操作，这些操作被称为指令系统 我们看到的v- 开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令 指令使用的几种方式： 1234567891011121314//会实例化一个指令，但这个指令没有参数 `v-xxx`// -- 将值传到指令中`v-xxx="value"` // -- 将字符串传入到指令中，如`v-html="'<p>内容</p>'"``v-xxx="'string'"` // -- 传参数（`arg`），如`v-bind:class="className"``v-xxx:arg=&q ...

一、错误类型任何一个框架，对于错误的处理都是一种必备的能力 在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。 主要的错误来源包括： 后端接口错误 代码中本身逻辑错误 二、如何处理后端接口错误通过axios的interceptor实现网络请求的response先进行一层拦截 12345678910111213apiClient.interceptors.response.use( response => { return response; }, error => { if (error.response.status == 401) { router.push({ name: "Login" }); } else { message.error("出错了"); return Promise.reject(error);  ...

一、是什么过滤器（filter）是输送介质管道上不可缺少的一种装置 大白话，就是把一些不必要的东西过滤掉 过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数 Vue 允许你自定义过滤器，可被用于一些常见的文本格式化 ps: Vue3中已废弃filter 二、如何用vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： 12345<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div> 定义filter在组件的选项中定义本地的过滤器 1234567filters: { capitalize: function (value) { if (!value) ...

一、什么是首屏加载首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中最重要的环节 关于计算首屏时间利用performance.timing提供的数据： 通过DOMContentLoad或者performance来计算出首屏时间 123456789101112131415// 方案一：document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting');});// 方案二：performance.getEntriesByName("first-contentful-paint")[0].startTime// performance.getEntriesByName("first-contentfu ...

一、工程化概述Vue3 项目工程化主要包含以下几个方面： 项目搭建（Vite + Vue3 + TypeScript） 代码规范 组件设计 状态管理 自动化部署 二、具体实现1. 项目搭建1.1 目录结构1234567891011121314├── src/│ ├── api/ # API 接口│ ├── assets/ # 静态资源│ ├── components/ # 公共组件│ ├── composables/ # 组合式函数│ ├── layouts/ # 布局组件│ ├── pages/ # 页面组件│ ├── stores/ # Pinia 状态管理│ ├── styles/ # 全局样式│ ├── types/ # 类型定义│ └── App.vue # 根组件├── env.d.ts # 环境变量类型声明├── vite.config.ts # Vite 配置└── tsconfig.json ...

一、作用v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在 v-for 的时候，建议设置key值，并且保证每个key值是独一无二的，这便于diff算法进行优化 两者在用法上 12345<Modal v-if="isShow" /><li v-for="item in items" :key="item.id"> {{ item.label }}</li> 二、优先级v-if与v-for都是vue模板系统中的指令 在vue模板编译的时候，会将指令系统转化成可执行的render函数 示例编写一个p标签，同时使用v-if与 v-for 12345<div id="app"> ...