起源：在 Vue 的数据绑定中会对一个对象属性的变化进行监听，并且通过依赖收集做出相应的视图更新等等。 之前用 Object.defineProperty通过对象的 getter/setter简单的实现了对象属性变化的监听，并且去通过依赖关系去做相应的依赖处理。 但是，这是存在…

createElement方法也是vue和react用来创建虚拟DOM的方法，我们也叫这个名字，方便记忆。接收三个参数，分别是type，props和children 到目前为止，已经轻而易举的实现了创建虚拟DOM。那么，接下来进行下一步，将其渲染为真实的DOM，别犹豫，继续回到…

Virtual DOM的概念相信大家都不会陌生，Vritual DOM是相对与DOM(文档对象模型)来说的，MDN上关于DOM的定义：“DOM模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点(node)，每个节点都包含着对象(objects)。DOM的方法(met…

现在的前端面试不管你用的什么框架，总会问你这个框架的双向绑定机制，有的甚至要求你现场实现一个双向绑定出来，那对于没有好好研究过这方面知识的同学来说，当然是很难的，接下来本文用160行代码带你实现一个极简的双向绑定机制。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以…

TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。 TypeSc…

本文重点讲述Vue2渲染的整体流程，包括数据响应的实现（双向绑定）、模板编译、virtual dom原理等，希望读者看完有所收获。 前者固然直接，但是当应用变得复杂则代码将难以维护，而后者框架帮我们实现了一系列的操作，无需管理过程，优势显然可见。 为了实现这一点，就是实现如何输…

模板引擎是html渲染必不可少的工具，前端开发的同学经历了从最原始的字符串拼接、用数组push/join，发展到封装简单的string.format函数，再到功能更加强大的模板引擎，可以在模板中内嵌处理逻辑。 我们从需求出发，想一想把上面的模板字符串中的变量替换成数据源中的变量…

前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。 但是对项目里的webp…

公司的前端项目使用Vue框架，Vue框架使用Webpack进行构建，随着项目不断迭代，项目逐渐变得庞大，然而项目的构建速度随之变得缓慢，于是对Webpack构建进行优化变得刻不容缓。经过不断的摸索和实践，通过以下方法优化后，项目的构建速度提高了50%。现将相关优化方法进行总结分…