2019年05月_Emily Qin

09月 08月 07月 05月 03月 02月 01月

原创 Vue源码二次解析【理论】5------Vue初始化全过程-------VDOM

VNode【虚拟DOM】是Vue中一个很重要的方面；在Vue中，VNode是对真实DOM的一种抽象【VNode 用来映射到真实 DOM 的渲染】。每个 VNode 都有children，children每个元素也是一个 VNode，这样就形成了一个 VNode Tree，它很好的描述了我们的 DOM Tree。VNode由createElement函数创建，创建一个DOM过程：...

2019-05-31 14:55:14 236

原创 Vue源码二次解析【理论】4------Vue初始化全过程-----render

Vue的渲染过程主要依赖的是render函数，核心js文件为render.js文件。render函数的第一个参数是createElement，在这里render函数中的createElement方法就是vm.$createElement方法。vm.$createElement方法定义是在执行initRender方法的时候，vm._render最终是通过执行createE...

2019-05-31 11:47:13 211

原创 Vue源码二次解析【理论】3------Vue初始化全过程-----挂载过程

Vue 中是通过$mount实例方法去挂载vm的。整个过程是先缓存原型上的$mount方法，然后重新定义该方法。首先，它对el做了限制，Vue 不能挂载在body、html这样的根节点上。接下来的是判断有没有定义render方法。如果没有定义render方法，则会把el或者template字符串转换成render方法。整个大的过程如下：接下来拆分...

2019-05-31 11:41:59 217

原创 Vue源码二次解析【理论】2------Vue初始化全过程

这次分析以在 web 应用下， Runtime + Compiler 构建出来的 Vue.js为例。Vue的本质上就是一个用 Function 实现的 Class，然后它的原型 prototype 以及它本身都扩展了一系列的方法和属性。Vue 的初始化逻辑非常清楚，实质上就是是往Vue的原型上去挂载一些方法，或者给Vue这个对象本身扩展全局的静态方法。把这些方法拆分到不同的功能模块中，把不...

2019-05-31 10:57:11 260

原创 Vue源码二次解析【理论】1------Vue构建过程

在前一个系列中，结合源码，我已经分析的很详细了。这一个系列主要是想通过理论，从函数的角度来了解每个过程的形成。在本篇以及接下来的篇章中所有的分析只是基于Web这个层面。Vue的源码构建过程主要依赖build.js这个文件，而运行这个文件的相关配置主要存放在config.js文件中，这次着重就这两个文件做一个简单的分析。先来看一个整体的流过程：在build.js中构建的主要依赖于buil...

2019-05-31 09:50:01 285

原创在WebStorm中安装Vue环境

软件源材料：webstormnodenpmwebpackvue-cliwebstormWebStorm 是jetbrains公司旗下一款JavaScript 开发工具，与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。软件官网为http://www.jetbrains.com/webstorm/，从官网中下载对应的电脑版本，具体的安...

2019-05-30 15:52:08 2715

原创 Vue源码系列22----响应式原理----组件更新

当数据发生变化的时候，会触发渲染watcher的回调函数，进而执行组件的更新过程。updateComponent = () => { vm._update(vm._render(), hydrating)}new Watcher(vm, updateComponent, noop, { before () { if (vm._isMounted) { ...

2019-05-24 13:17:07 477

原创 Vue源码系列23---响应式原理-----计算属性和侦听属性

Vue 的组件对象支持了计算属性computed和侦听属性watch2 个选项。计算属性本质上是computed watcher，而侦听属性本质上是user watcher。就应用场景而言，计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。watcher有4 个options，通常会在创建...

2019-05-24 09:34:15 382

原创 markdown语法

Markdown基本语法：输入`` 就能获得目录标题#：一级标题##：二级标题###：三级标题####：四级标题#####：五级标题######：六级标题字体加粗要加粗的文字左右分别用两个*号包起来 **加粗的内容**斜体要倾斜的文字左右分别用一个*号包起来 *倾斜字体*斜体加粗要倾斜和加粗的文字左右分别用...

2019-05-22 11:51:19 111

原创 Vue源码系列21------响应式原理-----检测变化的注意事项

如何处理一些特殊情况【响应式数据对于对象新增删除属性以及数组的下标访问修改和添加数据等的变化观测不到。】：我们就可以知道如何把它们也变成响应式的对象【通过Vue.set以及数组的API可以解决这些问题，本质上它们内部手动去做了依赖更新的派发。】。其实对于对象属性的删除也会用同样的问题，Vue 同样提供了Vue.del的全局 API，它的实现和Vue.set大相径庭，甚至还要更简单一些。...

2019-05-22 11:47:06 184

原创 Vue源码系列20------响应式原理----nextTick

nextTick是 Vue 的一个核心实现，在介绍 Vue 的 nextTick 之前，首先需要了解一下JS 的运行机制。其次需要了解到数据的变化到 DOM 的重新渲染是一个异步过程，发生在下一个 tick。这就是我们平时在开发的过程中，比如从服务端接口去获取数据的时候，数据做了修改，如果我们的某些方法去依赖了数据修改后的 DOM 变化，我们就必须在nextTick后执行。比如下面的伪代码...

2019-05-22 11:39:24 197

原创 Vue源码系列19------响应式原理----派发更新

依赖收集的目的就是为了当我们修改数据的时候，可以对相关的依赖派发更新。Vue 数据修改派发更新的过程，实际上就是当数据发生变化的时候，触发 setter 逻辑，把在依赖过程中订阅的的所有观察者，也就是watcher，都触发它们的update过程，这个过程会把所有要执行update的watcher推入到队列中，又利用队列做了进一步优化，在nextTick后执行所有watcher的ru...

2019-05-22 11:27:25 341

原创 Vue源码系列18------响应式原理-----依赖收集

响应式对象 getter 相关的逻辑就是做依赖收集。收集依赖的目的是为了当这些响应式数据发送变化，触发它们的 setter 的时候，能知道应该通知哪些订阅者去做相应的逻辑处理，我们把这个过程叫派发更新，其实Watcher和Dep就是一个非常经典的观察者设计模式的实现。依赖收集时订阅数据变化的watcher的收集。先来回顾一下 getter 部分的逻辑：export functio...

2019-05-22 10:55:22 297

原创 Vue源码系列17------响应式原理---响应式对象

Vue.js 实现响应式的核心是利用了 ES5 的Object.defineProperty，给数据添加了 getter 和 setter，目的就是为了在我们访问数据以及写数据的时候能自动执行一些逻辑：getter 做的事情是依赖收集，setter 做的事情是派发更新，这也是为什么 Vue.js 不能兼容 IE8 及以下浏览器的原因。Vue会把props、data等变成响应式对象，在创建过程中...

2019-05-22 10:16:31 333

原创 Vue源码系列16------响应式原理-----原理

至此分析了Vue 怎么实现数据渲染和组件化的，主要是初始化的过程，把原始的数据最终映射到 DOM 中，但并没有涉及到数据变化到 DOM 变化的部分。而 Vue 的数据驱动除了数据渲染 DOM 之外，还有一个很重要的体现就是数据的变更会触发 DOM 的变化。都知道前端开发最重要的 2 个工作，一个是把数据渲染到页面，另一个是处理用户交互。先来看一个示例：<div id="app" @...

2019-05-22 09:54:19 119

原创 Vue源码系列15------组件化----异步组件

在日常的开发中，为了提升性能，多使用异步组件。即将一些非首屏的组件设计成异步组件，按需加载。Vue有3 种异步组件的实现方式，实现了 loading、resolve、reject、timeout 4 种状态。异步组件实现的本质是 2 次渲染，除了 0 delay 的高级异步组件第一次直接渲染成 loading 组件外，其它都是第一次渲染生成一个注释节点，当异步获取组件成功后，再通过forceRe...

2019-05-22 09:48:05 389

原创 Vue源码系列15------组件化-----组件注册

在 Vue.js 中，除了它内置的组件如keep-alive、component、transition、transition-group等，其它用户自定义组件在使用前必须注册。在开发过程中可能会遇到如下报错信息：'Unknown custom element: <xxx> - did you register the component correctly? For rec...

2019-05-22 09:21:49 215

原创 Vue源码系列14------组件化-----生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码Vue官方给出的关于生命周期的图示链接如下：https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%9...

2019-05-21 18:01:55 1168 1

原创 Vue源码系列12-------合并配置----外部调用

new Vue初始化的过程通常有 2 种场景，一种是外部我们的代码主动调用new Vue(options)的方式实例化一个 Vue 对象；另一种是组件过程中内部通过new Vue(options)实例化子组件。但是无论哪种场景，都会执行实例的_init(options)方法，它首先会执行一个merge options的逻辑，相关的代码在src/core/instance/init...

2019-05-21 17:27:55 259

原创 Vue源码系列13------合并配置----组件调用

组件场景由于组件的构造函数是通过Vue.extend继承自Vue的，先回顾一下这个过程，代码定义在src/core/global-api/extend.js中/** * Class inheritance */Vue.extend = function (extendOptions: Object): Function { // ... Sub.options ...

2019-05-21 17:27:51 681

原创 Vue源码系列11------Vue组件化----createComponent 【创造组件】

Vue.js 的一个核心思想是组件化。所谓组件化，就是把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件的资源是独立的，组件在系统内部可复用，组件和组件之间可以嵌套。下面来看看createComponent的实现，了解到它在渲染一个组件的时候的 3 个关键逻辑：构造子类构造函数，安装组件钩子函数和实例化vn...

2019-05-16 16:04:37 2232

原创 Vue源码系列10------VueDOM的首次渲染---update

Vue 的_update是实例的一个私有方法，它被调用的时机有 2 个，一个是首次渲染，一个是数据更新的时候；这篇文章中涉及的是首次渲染的时候发生的变化。_update方法的作用是把 VNode 渲染成真实的 DOM，它的定义在src/core/instance/lifecycle.js中：Vue.prototype._update = function (vnode: VNode...

2019-05-15 16:46:58 675

原创 Vue源码系列9------创建 VNode-----createElement

createElement创建 VNode 的过程，每个 VNode 有children，children每个元素也是一个 VNode，这样就形成了一个 VNode Tree，它很好的描述了我们的 DOM Tree。createElement 这个方法定义在src/core/vdom/create-elemenet.js中：// wrapper function for pr...

2019-05-15 15:10:45 1929 1

原创 Vue源码系列8------Virtual DOM

Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点【VNode 是对真实 DOM 的一种抽象描述】，所以它比创建一个 DOM 的代价要小很多。在 Vue.js 中，Virtual DOM 是用VNode这么一个 Class 去描述，它是定义在src/core/vdom/vnode.js中的。它的核心定义是几个关键属性，标签名、数据、子节点、键值等，其它属性都是都...

2019-05-15 14:09:24 114

原创 Vue源码系列7------VueDOM渲染-----render函数

Vue 中_render方法其实是实例的一个私有方法，用来把实例渲染成一个虚拟 Node。源方法定义在src/core/instance/render.js文件中：Vue.prototype._render = function (): VNode { const vm: Component = this const { render, _parentVnode } = vm....

2019-05-15 11:57:12 653

原创 Vue源码系列6------Vue实例的挂载

Vue 中是通过$mount实例方法去挂载vm的，$mount方法在多个文件中都有定义，如src/platform/web/entry-runtime-with-compiler.js、src/platform/web/runtime/index.js、src/platform/weex/runtime/index.js。因为$mount这个方法的实现是和平台、构建方式都相关的。接...

2019-05-15 11:02:24 361

原创 Vue源码系列5------数据驱动-----从初始化到挂载

Vue的核心思想之一就是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，我们对视图的修改，不会直接操作 DOM，而是通过修改数据。所有的修改是基于数据的，不会操作DOM，非常利于维护和更新。下面先从new Vue看起：我们都知道，new关键字在 Javascript 语言中代表实例化是一个对象，而Vue实际上是一个类，类在 Javascript 中是用 Function 来实现的...

2019-05-14 15:30:16 143

原创 Vue源码系列4------Vue文件的入口-----Vue的初始化

这片文章主要分析，在 web 应用下， Runtime + Compiler 构建出来的 Vue.js。入口文件在Vue源码中，入口文件为src/platforms/web/entry-runtime-with-compiler.js。入口文件通过export导出的是一个Vue对象，通过import导入相关依赖组件。首先这个Vue对象来自于；而runtime/index中的Vue对...

2019-05-13 11:12:48 369

原创 Vue源码系列3------Vue源码构建原理

了解了单一的模块，下面来看看Vue是怎么组织这些模块的Vue.js 源码是基于Rollup【打包构建工具；更轻量】构建的，它的构建相关配置都在 scripts 目录下。构建脚本通常一个基于 NPM 托管的项目都会有一个 package.json 文件，它是对项目的描述文件，它的内容实际上是一个标准的 JSON 对象。我们通常会配置script字段作为 NPM 的执行脚...

2019-05-10 13:46:25 662

原创 Vue源码系列2------认识Vue源码目录

Vue.js的源码全部开源在github上，我们可以从github上克隆到本地，项目地址--https://github.com/vuejs/vue；以便于研究。Vue.js 的项目源码都在 src 目录下，其目录结构如下。src├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同...

2019-05-10 11:06:04 245

原创 Vue源码系列1------认识Flow----类型检查

Flow是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查。因此在解析Vue.js源码的时候需要Flow背景知识，将容易更好的理解。JS是弱动态类型语言，虽然非常灵活，但是有一个隐患是在编译时不会报错，但是运行时会出现bug。目前JS主要采用ES6语法，类型检查会解决掉很大一部分隐藏的bug。所谓类型检查，就是在编译期...

2019-05-10 10:42:02 583