1. 为什么要学习源码 ? 阅读优秀的代码的目的是让我们能够写出优秀的代码。 不给自己设限，不要让你周围人的技术上限成为你的上限。 其实就跟我们写作文一样，你看的高分作文越多，写出高分作文的概率就越大。 基于现在的程序员工作模式(模块化开发，只需要拿到需求做自己的部分)，别说看…

Vue3.0 在去年 9 月正式发布了，看大家都有在热情的拥抱 Vue3.0。今年初新项目也开始使用 Vue3.0 来开发，这篇文章就是在使用后的一个总结， 包含 Vue3 新特性的使用以及一些使用经验分享。 使用 Vue2.x 的小伙伴都熟悉，Vue2.x 中所有数据都是定义…

CSS 变量又称为 CSS 自定义属性，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(--main-color);） 为什么选择两根连词线（--）表示？…

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

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

无论是对象还是数组，需要实现双向绑定的话最终都会执行这个函数，该函数可以监听到 set 和 get 的事件。 在 Object.defineProperty 中自定义 get 和 set 函数，并在 get 中进行依赖收集，在 set 中派发更新。接下来我们先看如何进行依赖收集…

首先这里的子组件tree-item没有在页面上有引入，但是也可以正常使用。这里就是关健点，因为这个子组件是需要递归实现，所以，需要动态注册到当前组件中。代码如下（由于代码太多，先贴图说明吧，点击这里可以看源码）： 这里子组件看起来是不是挺奇怪的，但是为了递归他本身，暂时也只想到…

基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 建议直接添加到主屏幕(ios端体验差一些). 学习vue全家桶，本人很长一段时间在用React。 利用PWA技术来模仿原生应用,来探究PWA与原生的差异。 作者声称2.5之后vue增强了…