之前写了一篇react相关的文章，但是那篇文章大都在介绍代码，对思想架构基本没什么涉及。这篇文章一直没有想好怎么写，react内部属实有够复杂的。看了好多人对react的架构理解，这里动笔写一下，有不同意见欢迎diss.这里首推参考的文章:卡颂大佬的react源码解析DavidWong的一眼看穿react4步曲React 为什么使用 Lane 技术...

编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，使用包含构建功能的 Vue.js。显然，编译是一项耗性能的工作，所以更推荐前者——离线编译。

首先我们我们的这个ui组件库是开发的vue版本，如果需要变通其他版本的话，就把vue相关的编译器移除，其他相关的编译器加上就可以了(例如react)，打包构建方式是通用的。组件库的组织发版和项目是不太一样的，这里提下思路。首先我们要确定我们做的库要满足的需求：支持全部加载支持按需加载ts的补充类型支持同时支持cjs...

下载下来直接 yarn start启动就可以了前言：react项目是基于Monorepo 结构开发的，后续文章中所出现的地址都是我们工程的src/react/packages/ 这一级来找的具体包

在本文之前说了 react15的缺点，这里来说下16版本是怎么修复的。我之前的一篇文章 写过mini-react-fiber版本,那是一个简易版。我们这里分析先做总结，然后根据总结的流程来看源码，这里主要就是串通主流程。大架构：首先从react源码层面执行，宏观角度来看，它实际上分为了两部分。render阶段：主要就是用来生成新的fibe...

react源码中reactRoot,fiberRoot,rootFiber的关系[链接]fiber数据结构[链接]web前端导航[链接]React技术揭秘尤雨溪：在框架设计中寻求平衡 上Vue.js 技术揭秘vue.js 技术解密 文档github星级项目自上向下分析react源码17[链接][链接][链接][链接][链接][链接][链接][链接][链接][链接][链接][链接]chrome://inspect/#dev...

从我上面连接这篇文章我们可以知道：React 16 之前的版本比对更新 VirtualDOM 的过程是采用循环加递归实现的，这种比对方式有一个问题，就是一旦任务开始进行就无法中断，如果应用中组件数量庞大，主线程被长期占用，直到整棵 VirtualDOM 树比对更新完成之后主线程才能被释放，主线程才能执行其他任务。这就会导致一些用...

这里说到了react16使用了fiber,那我们看下16之前输入stack架构的实现的问题，说起React算法架构避不开“Reconciliaton”。

之前写过一般react-mini版本的实现就是会有点问题，这里进行了一次改版,这个结构是stack版的后续会出一版filber架构的.准备工作是和之前一样的，参考我之前写的[链接]

前面写的了解了一下vue这个框架,所有的框架都要在实际应用里感受一下好坏.这里用vue+vuex+Ts+elementEI来做一个项目git地址:[链接]首先下载vue-cli 这里用的版本是4.5.9首先创建项目 {代码...} 然后来回答一些问题这里我们自己配置要的选项然后第一个不选默认是2.0版本的vue,这里我们用2.0。然后把babel,ts,router,vuex,...

之前已经了解过了vue2.0版本，现在我们来了解一下3.0版本.首先我们来看下变化：源码组织方式的变化.Composition API性能提升Vite首先源码的组织方式首先类型约束2.0是flow然后3.0源码采用TypeScript重写然后就是使用Monorepo管理项目结构3.02.0然后就是Composition API设计动机：回顾OptionsAPI包含一个描述组件选项(dat...

改变this解题思路：给绑定的this对象通过defineProperty添加一个回调fn不可枚举的属性,这样传入的this对象上看不到它,值就是当前的this，也就是要调用mycall的函数(例子中的this就是函数fn) ,然后通过对象.调用的方式来调用绑定this对象上的我们定义的函数,通过这种方式来变相的确定内部的this,最后再删除掉我们之前定义...

官方文档的解释：Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

这里说下如何做nuxt得部署首先我们得nuxt.config.js配置添加主机为什么步骤为0.0.0.0参考这里[链接][链接][链接]首先准备工作：首先把我们得nuxt项目执行:npm run build 进行打包然后本地npm run start 启动一个生产web服务器本地看看有没有问题确定没问题之后把.nuxt 和static，nuxt.config.js,package.json,package.js...

首屏加载时间过长与传统服务端渲染直接获取服务端渲染好的 HTML 不同，单页应用使用 JavaScript 在客户端生成 HTML来呈现内容，用户需要等待客户端 JS 解析执行完成才能看到页面，这就使得首屏加载时间变长，从而影响用户体验。

首先注册vuex的插件开发阶段开启strict严格模式配置初始的state配置对应的getters配置对应的mutations 无副作用的函数更新配置actions在此做异步处理最后配置模块模块中配置：

首先我们导入vue时会初始化实例成员，静态成员全局静态例如config,options,内部工具方法,一些静态方法例如set，nextTick,组件,指令，过滤器方法,然后原型方法例如:mount(内部调用mountComponent挂载),init,_render(方法里默认调用了options里的render,默认传递vm.$createElement提供给用户传入的render当 h函数，生成虚...

vue相关的源码分析最后一篇,模板编译和组件化推荐先去看下总结：vue源码总结模板编译模板编译的主要目的是将模板 (template) 转换为渲染函数 (render) {代码...} 渲染函数 render {代码...} 模板编译的作用:Vue 2.x 使用 VNode 描述视图以及各种交互，用户自己编写 VNode 比较复杂用户只需要编写类似 HTML 的代码 - Vue ...

vue-clic生成项目中的render 中的 h 函数,就是createElement()src/core/instance/render.js中创建h函数Vue.init 的时候会调用initRender

推荐可以先去看下总结：vue解析总结之前我们解析了mini-vue的响应式实现，和虚拟dom库的实现，现在我们就来解析一下vue内部具体是如何做的，看看它在我们简易实现上增加了什么。准备工作：首先下载一份vue源代码 地址：[链接]这个版本是2.6的，分析这个版本的原因：

前言：前面写了1篇vue 观察者模式响应式数据的解析，里面关于dom操作部分是直接操作的真实dom，并没有涉及到虚拟dom部分，然后这里就做一个虚拟dom的实现解析。首先，还是说什么是虚拟dom，我之前一篇mini-react中说过虚拟dom的概念，这里再重复一下。

前言：最近关注了vue，想对比一下和react的实现的区别，方便以后项目做选型。打算了解对比一下基本实现，才能写出更符合 框架设计思想高效率的代码，出了问题才能更好的排错。这个版本并没有实现四则运算，和生命周期以及数组的方法劫持，只是做了简单的响应式分析，后续会做一版虚拟dom的分析vue响应式模拟准备工作数据...

首先我们用vue-cli创建一个项目，要使用带编译器得版本，因为要编译模板。然后我们找到对应得router/index.js，把官方得vue-router,替换成我们自己新建得

前面我们说了webpack的一些基础，现在我们来使用webpack实际来编译写个项目。用vue-cli创建一个项目，然后把它的vue-cli-service以及webpack等黑盒工具移除，然后我们来自己编译它。首先我们要创建三个文件

前面讲了，wepack一些相关的知识，这里集成一下eslint的相关配置。首先安装对应模块：安装eslint模块安装eslint-loader模块初始化 .eslintrc.js文件配置安装完成后先初始化配置：yarn eslint --init然后回答一些问题：1.我们选择检查语法，发现问题，执行统一代码风格2.模块化这里我们使用javascript modules（es6语法）...

babfile## 模块化开发前面说了gulp工作流这边现在来讲下模块化开发模块化开发是当下最重要的开发范式模块化只是思想。模块化的演变过程：

技术是为了解决问题存在的以前那种写demo套模板，已经远远不能满足我们现在开发要求了，所以就有了前端工程化的概念。既然说了技术是为了解决问题存在的，前端工程化也不例外。问题：想使用es6+新特性，但是浏览器不兼容想要使用less,sass,PostCss增强css特性，但是运行环境不能直接支持想要模块化的方式提高项目可维护...

内存管理内存为什么需要管理 {代码...} 不当的操作会导致堆内存，飙升。内存管理介绍：内存：可读写单元组成，表示一片可操作空间管理：人为的去操作一片空间的申请，使用和释放内存管理：开发者主动申请空间，使用空间，释放空间管理流程：申请-使用-释放javascript中的垃圾回收javascript中内存管理是自动的对象不再引...

解决办法1: IIFE 提供独立作用域(function () { const a = 123})()解决办法2: 在当前文件使用 export，也就是把当前文件变成一个模块模块有单独的作用域const a = 123

首先要区分语言和平台之间的关系，语言本身是指ECMAScript,平台是指浏览器或者node，在平时我们浏览器开发里js就是ECMAScript。浏览器的组成部分node.js的组成部分在ES5.1之后版本我们统称为ES6主要说明如下：**• let 和 const• Arrow functions• Classes（类）• Generators• Map 和 Set• for ... of 循环• Symbol• Modu...