- 博客(43)
- 收藏
- 关注
RSS订阅原创 Vite 源码（八）Vite 的预构建原理
theme: cyanosishighlight: monokai 先看下官网介绍当你首次启动vite时，你可能会注意到打印出了以下信息：bashOptimizable dependencies detected: (侦测到可优化的依赖：)react, react-domPre-bundling them to speed up dev server page l...
2021-12-30 21:01:39
491
原创 Vite 源码（七）Vite 的热更新原理
theme: cyanosishighlight: monokai前置经过前面几篇铺垫之后，接下来看下 Vite 的热更新原理，先看下前置流程图接下来会详细分析下上图的过程demo假设main.ts文件如下typescriptimport a from './a'console.log(a)if(import.meta.hot){ import.m...
2021-12-30 14:30:00
1013
原创 Vite 源码（六）解析 importAnalysis 插件
theme: cyanosishighlight: monokai介绍importAnalysis是 Vite 中内置的很重要的一个插件，它的作用如下解析请求文件中的导入，确保它们存在；并重写导入路径为绝对路径如果导入的模块需要更新，会在导入URL上挂载一个参数，从而强制浏览器请求新的文件对于引入 CommonJS 转成 ESM 的模块，会注入一段代码，以支持获取模块内容...
2021-12-27 19:36:48
3377
原创 Vite 源码（五）浏览器访问 `localhost:3000/` 时，Vite做了什么
theme: cyanosishighlight: monokai在之前几篇文章中我们知道了Vite 的启动过程。当我们执行yarn run dev之后，Vite 会初始化配置项、预构建、注册中间件，并启动一个服务器。之后就不会再进行其他操作，直到我们访问localhost:3000/当我们访问localhost:3000/时，会通过中间件拦截文件请求，并处理文件，最终将处理后的文...
2021-12-24 18:01:33
447
原创 Vite 源码（四）Vite 的 Module Graph
theme: cyanosishighlight: monokai每种构建工具都会有一个 Graph 用于维护模块之间的引用和模块信息，这篇文章就是分析 Vite 的 Module Graph 是什么样子的创建 Module Graph 实例初始化过程发生在createServer过程中```typescriptconst container = await createP...
2021-12-23 22:24:32
215
原创 Vite 源码（三）Vite 为什么可以支持 Rollup 钩子函数
theme: cyanosishighlight: monokai在Vite官网中，有这样一段话 在开发中，Vite 开发服务器会创建一个插件容器来调用 Rollup 构建钩子，与 Rollup 如出一辙。而这个插件容器就是通过下述的createPluginContainer方法创建的，这个函数的调用发生在服务启动时，在createServer函数中typescript...
2021-12-22 15:22:25
287
原创 Vite 源码（二）vite启动流程以及如何获取config配置
theme: cyanosishighlight: monokai当在控制台输入yarn run dev时，执行对应源码的位置是node/cli.ts。``typescriptimport { cac } from 'cac'// 创建CLI实例，'vite'表示，在 help 和 version 命令中显示的名称const cli = cac('vite')// 添加命令...
2021-12-21 17:33:21
1094
原创 Vite 源码（一）ESbuild 使用
Vite 中的 ESbuildVite 中很多地方都是用了 ESbuild，比如- 转译ts类型的配置文件- 请求 ts、jsx、tsx 文件时，将其编译成js文件- 自动搜寻预编译模块列表- 预编译模块所以看 Vite 源码之前学会 ESbuild 还是有必要的ESbuild 为什么快js是单线程串行，ESbuild 是新开一个进程，然后多线程并行，充分发挥多核优势...
2021-12-20 21:36:46
1577
2
原创 浏览器中一些有趣的知识
前言在看完浏览器渲染原理之后引申出的一些疑问，这篇文章对这些疑问进行解答和梳理。如果不熟悉浏览器渲染原理，可以看下我之前总结的文章 ???? 浏览器渲染原理 ????参考文章 兵哥的浏览器工作原理与实践 浏览器的回流与重绘 (Reflow & Repaint) 浏览器层合成与页面渲染优化 CSS3硬件加速也有坑 无线性能优化：Composite CSS G...
2021-11-02 17:20:00
111
原创 浏览器渲染原理
前言之前看完兵哥的浏览器工作原理与实践之后，发现有很多知识点晦涩难懂，后续通过翻阅相关博客和请教大佬才明白。所以在此整理记录，方便后续查阅复习。也欢迎指错勘误！！！开始浏览器渲染原理主要包含如下几个阶段构建DOM树样式计算布局阶段分层绘制分块栅格化合成关于回流、重绘、合成你可以想象一下，从0，1字节流到最后页面展现在你面前，这里面渲染机制肯定很复杂，所以...
2021-11-02 00:14:45
396
原创 Vue源码（十二）常用API
highlight: tomorrow-night-eightiesVue.use文档定义在src/core/global-api/use.js中```javascriptVue.use = function (plugin: Function | Object) { const installedPlugins = (this.installedPlugins || (...
2021-08-21 17:25:50
78
原创 Vue源码（十一）keep-alive 原理
highlight: tomorrow-night-eightiestheme: cyanosis前言通过这篇文章可以了解如下内容keep-alive原理<keep-alive>在Vue 源码中是一个内置组件，它的定义在 src/core/components/keep-alive.js 中：javascriptexport default { n...
2021-08-21 16:58:35
108
原创 Vue源码（十）插槽原理
highlight: tomorrow-night-eightiestheme: cyanosis前言通过这篇文章可以了解如下内容v-slot 和 slot 属性的区别具名插槽和作用域插槽的区别$forceUpdate原理Vue中实现了具名插槽和作用域插槽两种，而具名插槽在父组件中可以通过slot="header"属性或v-slot:header指定插槽内容；先从具...
2021-08-19 10:45:22
179
原创 Vue源码（九）指令原理
highlight: tomorrow-night-eightiestheme: cyanosis前言通过这篇文章可以了解如下内容指令的绑定原理表单 v-model 原理组件 v-model 原理看这篇文章之前，要理清楚 patch 过程和事件机制，可以看下之前写的^_^，文中涉及的所有流程在之前的文章中都很详细的分析过进入正题前先看下Demo，下面是两个自定义...
2021-08-17 00:13:14
120
1
原创 Vue源码（八）异步组件原理
highlight: tomorrow-night-eightiestheme: cyanosis前言通过这篇文章可以了解如下内容Vue 有几种异步组件这些异步组件的实现原理Vue中总共有3种异步组件，分别是普通函数异步组件、Promise异步组件和高级异步组件，接下来分别介绍一下它们的原理普通函数异步组件javascriptVue.component('h...
2021-08-14 15:19:34
293
原创 Vue 源码（七）事件机制
highlight: tomorrow-night-eightiestheme: cyanosis前言通过这篇文章可以了解如下内容原生事件原理事件修饰符原理自定义事件原理$emit原理$on原理$off原理$once原理钩子函数执行patch函数之前，会注册一些钩子函数。用于设置DOM元素相关的属性、样式、事件、指令等。这些钩子函数在 patch 不同时...
2021-08-13 11:15:34
148
原创 Vue 源码（六）patch 过程（二）
highlight: tomorrow-night-eightiestheme: cyanosis前言Vue 的 patch 过程分为上下两篇Vue 源码(五)patch 过程(一)Vue 源码(六)patch 过程(二)通过这篇文章可以了解如下内容Vue 更新过程Vue 的 diff 算法diff 算法的时间复杂度v-for中key的作用更新过程...
2021-08-12 15:22:44
92
原创 Vue 源码（五）patch 过程（一）
highlight: tomorrow-night-eightiestheme: cyanosis前言Vue 的 patch 过程分为上下两篇Vue 源码(五)patch 过程(一)Vue 源码(六)patch 过程(二)通过这篇文章可以了解如下内容父子组件的DOM树是如何建立关联的mounted 生命周期的执行顺序第一次渲染当创建Render Wa...
2021-08-12 13:44:07
210
原创 Vue 源码（四）Computed 和 Watch 原理
highlight: tomorrow-night-eightiestheme: cyanosis前言通过这篇文章可以了解如下内容计算属性响应原理侦听器响应原理计算属性和侦听器的区别Computed初始化过程Vue 的计算属性在两个地方都有初始化过程，一个是在initState中，一个是在Vue.extend中在initState 中```javas...
2021-08-11 17:19:56
159
原创 Vue 源码（三）Props原理
highlight: tomorrow-night-eightiestheme: cyanosis前言通过这篇文章将了解子组件 Vue 实例是怎么获取传入的props数据的prop 响应原理传入的prop数据是怎么添加到vm.$options.propsData上的在开始之前需要明确一下：在createComponent函数中，会执行extractPropsF...
2021-08-11 15:11:10
244
原创 Vue 源码（二）响应式原理
highlight: tomorrow-night-eightiestheme: cyanosis前言从这篇文章可以了解如下内容Vue 中data的响应原理数组响应原理修改数组中对象属性为什么会触发视图更新Vue.prototype.$set实现原理组件中的data为什么是一个函数最后也会做下总结开始Vue 在创建实例对象时，会将 data、props、...
2021-08-10 14:28:33
90
原创 Vue 源码（一）如何创建VNode
highlight: tomorrow-night-eightiestheme: cyanosis前言这篇文章直接从挂载开始说起，不会从new Vue开始，因为已经有很多文章讲解过；其实这篇文章也是这样，但是感觉还是记一下，也算为后面做铺垫了。知识点通过这篇文章可以了解如下内容- Vue 的挂载过程- Render Watcher 是什么- Render Watche...
2021-08-09 18:12:36
416
原创 Module 的加载实现
浏览器加载众所周知，浏览器加载script标签是同步执行的，如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法<script src="path/to/myModule.js" defer></script><script src...
2020-06-01 11:25:42
315
原创 ES6笔记---Module 的语法
概述ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性// CommonJS模块let { stat, exists, readfile } = require('fs');// 等同于let _fs = require...
2020-05-27 11:07:36
420
原创 ES6---Proxy
概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。参数var proxy = new Proxy({}, { get: funct...
2020-05-25 14:10:41
7608
原创 ES6笔记 --- Reflect
概述(1) 将 Object 对象的一些内部的方法（比如 Object.defineProperty ），放到 Reflect 对象上。现阶段，某些方法同时在 Object 和 Reflect 对象上部署，未来的新方法将只部署在 Reflect 对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。(2) 修改某些 Object 方法的返回结果，让其变得更合理。比如，Object...
2020-05-23 07:12:12
471
转载 Code Splitting
webpack4 最大的改动就是废除了CommonsChunkPlugin 引入了 optimization.splitChunks如果你再webpack4中使用了weppack3的CommonsChunkPlugin 会出现以下报错：（运行配置文件 webpack3.config.js)Error: webpack.optimize.CommonsChunkPlugin has been re...
2019-08-26 12:29:54
527
转载 Vue解析——Vnode + diff
本文转载自Vue解析——Vnode + diff，感谢作者！！！！！前言vue2.0加入了virtual dom，有向react靠拢的意思。vue的diff位于patch.js文件中，我的一个小框架aoy也同样使用此算法，该算法来源于snabbdom，复杂度为O(n)。了解diff过程可以让我们更高效的使用框架。本文力求以图文并茂的方式来讲明这个diff的过程。virtual dom如果不了解vi...
2019-08-14 10:06:24
660
转载 Vuex可能会用的知识点
1、registerModule(模块动态注册)解释在 store 创建之后，你可以使用 store.registerModule 方法注册模块：// 注册模块 `myModule`store.registerModule('myModule', { // ...})// 注册嵌套模块 `nested/myModule`store.registerModule(['nested', '...
2019-08-02 08:08:17
498
转载 vue-router
router.resolve解析目标（括号内填写路由）位置//用法1：打开新窗口const { href } = this.$router.resolve({ path:'/about' query:{}})window.open(href, '_blank')复制代码//打开新窗口2<router-link target="_blank" :to="{path:'/abou...
2019-08-01 11:54:27
89
转载 工厂函数、构造函数
工厂函数顾名思义，就好比一个工厂一样，可以批量制造某种类型的东西。其实说白了就是封装了个方法减少重复工作function animal(name, sex) { let obj = new Object() obj.name = name obj.sex = sex obj.saySex = function () { alert(`我的性别是${this.sex}`) ...
2019-08-01 08:59:30
2672
转载 vue+webSocket
WebSocket简介直接复制粘贴廖老师写的== 地址WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。为什么传统的HTTP协议不能做到WebSocket实现的功能？这是因为HTTP协议是一个请求－响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。换句话说，浏...
2019-08-01 08:28:08
2569
转载 axios------CancelToken
目的：取消请求（不管请求已经走到哪个阶段）如图一个tab页面，内容共用同一套dom，即共用同一个渲染数组，点击aaa发送请求，在请求还没返回时，点击bbb，可能会出现aaa的数据跟bbb的数据同时渲染到bbb的内容中。所以，现在我得到的数据多于我要的 > 多出来的数据是因为上一个tab页请求延迟造成的 > 那我就在当前页请求数据的时候掐断上一个页面还没完成的请求就好了代码如下<t...
2019-08-01 06:46:40
1186
转载 vue------v-slot
具名插槽 需要多个插槽的情况，slot 元素有一个特殊的属性：name，用来定义额外的插槽。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称:<template v-slot:footer>...
2019-07-31 03:50:28
1024
转载 vue----$attr、$listeners
名词解释$attrs--继承所有的父组件属性（除了组件内prop属性、class 和 style ）inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承$listeners--属性，它是一个对象，里面包含了作用在这个组...
2019-07-30 08:58:57
1038
转载 vue------keep-alive用法【转载】
keep-alivekeep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素<keep-alive> <loading></loading></keep-laive>复制代码当组件在keep-alive内被切换时组件的activated、d...
2019-07-30 07:34:39
118
转载 AJAX常见请求方式
1、Content-Type: application/jsonimport axios from 'axios'let data = {"code":"1234","name":"yyyy"};axios.post(`${this.$url}/test/testRequest`,data).then(res=>{ console.log('res=>',res); ...
2019-07-23 10:12:51
181
转载 VUE高阶------使用JSX语法【转载】
什么是JSX?JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.对于h参数将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 版本开始，我们会在以 E...
2019-07-16 10:27:14
11415
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人