Pengfei Yang
Pengfei Yang
Hi @dreambo8563 , seems core-js is used in dev mode, add to depDependence will result unintentinal install, which will lead our parent project build problems. Please move core-js to devDependencies....
## 背景知识 v8 是一个 JIT(Just in time) 编译器。与传统的解释器一行一行执行不同的是，JIT 会在执行脚本前，对源码先解析（parsing）、再编译（compiling)，速度相比前者提升了不少。但解析和编译仍然消耗时间。能否将中间结果缓存起来呢？ 所以 v8 在 4.2（node > 5.7.0） 时，就支持了 code caching 的功能。减少二次执行的构建时间，加快脚本的整体执行速度。 ### 缓存中间结果，持久化到硬盘 要使用中间文件，需要先生成中间文件。v8 提供了以下几个方法： * `v8::ScriptCompiler::kProduceCodeCache` 是否生成 code cache * `v8::ScriptCompiler::Source::GetCachedData`...
```bash npm set registry https://r.npm.taobao.org # 注册模块镜像 npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像 #以下选择添加 npm set sass_binary_site https://npm.taobao.org/mirrors/node-sass # node-sass 二进制包镜像 npm set electron_mirror https://npm.taobao.org/mirrors/electron/ # electron...
由深入浅出 Vue 响应式 [（一）](https://github.com/flyyang/blog/issues/18) 和 [（二）](https://github.com/flyyang/blog/issues/19) 的介绍，我们可以画一个大的代码结构图：  我们已经分析了 initState 中的 initData（图右上部分） ，它会将我们的 data 属性转换为 getter / setter。也分析了 mount 的流程，它会编译你的模板到 render 函数，并且创建一个渲染 watcher 来做响应更新。 computed 属性初始化（绿框部分）处于 initState 的流程，晚于 initData ，但早于...
数据驱动开发是 Vue 的一大特征。 那么什么是数据驱动呢？在 Vue 的概念下，我们可以通过 data 来初始化页面；后续可以通过操作data 的值，来改变页面。整个过程都是围绕 data 来变化，所以称之为数据驱动，其中操作数据更新页面又常被称为响应式。 在 [深入浅出 Vue 数据驱动 （一）](https://github.com/flyyang/blog/issues/18) 中，我们已经介绍了初始化的部分，本节主要介绍响应式是如何实现的。  ## 写在前面 由上图可知，我们改变了 message 的值，对应的 ui 就会发生变化。 ``` App.message = 'Some one...
Vue nextTick 是 Vue 内部非常重要的机制。本文假设你已经了解 microtask 和 macrotask 的区别，将从以下三个角度来介绍 nextTick： 1. 静态方法 Vue.nextTick 挂载 2. 实例方法 Vue.prototype.$nextTick 挂载 3. nextTick 源码分析。 ## 静态方法 Vue.nextTick Vue.nextTick 定义于 `src/core/global-api/index.js`: ```js export function...
## 场景 假如要写一个文件解析器。针对不同的文件类型调用不同的方法。如果用一个函数来表达，可能会写出如下代码： ```js function fileParser(fileType) { if (fileType === 'js') jsParser(); if (fileType === 'txt') txtParser(); // .... } ``` 每增加一种类型，我们需要修改我们的 fileParser 函数，增加一个条件判断。这样不够优雅。 ## 实现 nodejs 的 require 函数也会遇到上面的情况，它需要针对三种不同的类型...
很多同学看源码分析，一般直接从 src 看起。像 `Vuejs` 这种项目，目录繁杂，入口都很难找到。不从中拎出几个线头来，很难从全局把握源码的流程。 理解源码是如何构建的，能帮助我们梳理这个过程。 ## 从 `package.json` 开始 我们关注三个字段： * "main": "dist/vue.runtime.common.js"。 默认 `require('vue')` , `import('vue')` 会读取的文件。格式为 `commonjs`。 * "module": "dist/vue.runtime.esm.js" webpack 2 以上会默认读 module 字段指定的文件。esm 模块方便做 tree...
数据驱动开发，与传统的 jQuery 开发相比，有很多优势。最明显的两点是： 1. 不需要关注 dom。不仅不需要关注如何初始化dom，也不需要关心状态变更时如何处理dom。整个流程围绕着如何操作数据。 2. 可以方便做优化。因为整个流程都是数据，加上配合 vdom 对底层的抽象，我们可以做类似于 diff patch 算法的优化。多了层抽象意味着有了很多优化空间。 在做UI 编程时，通常有两个流程需要考虑： * 第一次进来时如何展示。 * 当后续有变化时如何展示。 这是一个动态的**时间序**的考量。对应在 Vue 的流程中： * 从 new Vue 到 dom。 * 数据变化时更新...
由[深入浅出 Vue 构建流程](https://github.com/flyyang/blog/issues/16)可知，当我们使用： ```js import Vue from 'Vue' ``` 时，默认查找的文件是 `dist/vue.runtime.esm.js`。而构建出这个文件的入口文件是：`src/platforms/web/entry-runtime.js`。 runtime 版本是不包含 compiler 的，也就是没有编译 Vue 模板的过程。通常编译的工作交给 vue-loader，也就是 webpack 来代劳。但是从分析源码的角度来看，我们还是有必要要了解一下编译过程。所以我们从带 compiler 的入口开始: ```js // 源码分析从此开始 src/platforms/web/entry-runtime-with-compiler.js ``` ### Vue 是一个构造函数...