wozien

当影响页面的数据发生改变，以往我们需要手动操作DOM来显示最新视图。通过Vue编程，我们只需重点关注数据状态的逻辑处理，Vue会帮我们自动完成视图的渲染工作，这就是Vue的数据响应式机制。现在，我们通过源码来看看Vue的响应式原理。 在看源码之前，应该要对Vue的响应式原理有个…

组件化是Vue的核心概念，它让我们提取可复用的模版和脚本，在需要用到的地方插入对应的组件标签。那Vue是怎么把组件渲染成真实的DOM的呢，它和我们渲染普通的HTML有啥区别？我们在上篇文章中实例插入一个组件，通过源码分析组件怎么渲染？ 从上篇分析new Vue()的主流程后，我…

当我们通过new Vue()的实例挂载后，会替换对应挂载的DOM节点。现在我们通过源码的角度分析其背后的实现主流程。 现在我们来看看Vue构造函数的定义。它定义在src/core/instance/index.js中： 可见Vue是一个接收option配置对象的构造函数。下面各…

我们知道在es5中 Object.definePropety() 方法可以设置对象属性的 getter 和 setter，从而拦截对象属性的存取行为。但是局限性挺大，比如无法拦截数组的存取和其他对象的行为比如(in 和 delele 等)。于是，es6引入了代理( Proxy …

在es6中引入了Promise 和 Generator 函数的概念方便我们更加快速优化的实现异步编程，但是生成器的运行依赖于自动执行函数或者co模块。所以在es7引入了 async 函数，使异步操作更加方便。 我们只要在普通函数前面加上 async 关键字，在函数体里面把 yi…

Promise 是 es6 引入的异步处理方案，让我们可以采用链式的写法注册回调函数，摆脱多层异步回调函数嵌套的情况，使代码更加简洁。 状态只能从 pending到 fulfilled，或者 peding 到 rejected。并且状态一旦发生改变，将不会恢复。 Promise…

虚拟DOM(Virtual DOM)是Vue和React框架实现数据动态更新视图的关键技术，它利用JS运算速度优与DOM从而大大提高的视图渲染性能。由于虚拟DOM是用一个普通对象来表示视图节点结果，所以可以利用这个对象来渲染到不同平台，生成对应的原生控件来实现跨平台。 我们创建…

迭代器是es6中一个重要的概念，很多新特性都是基于迭代器概念而铺开的。为了更加方便的创建自定义的迭代器，es6引入了生成器 (Generator) 的概念。它是一种可以返回迭代器的特殊函数。有了生成器及它的特性可以让我们创建更加简洁的异步代码。 通过生成器生成的迭代器每次调用 …

用 for 循环语句来迭代数据时，需要初始化一个变量来记录每一次的迭代位置，但嵌套循环时就会变得繁琐。于是，es6引入了迭代器和 for...of 的概念来简化数据迭代操作。 迭代器是一种特殊的对象，它具有 next() 方法，每次调用返回一个结果对象。该对象包含两个属性，va…