vue源码简析

阅读vue的源码不仅可以深入的理解vue中的问题,还可以学习vue的程序设计; 简析的版本为 v2.5.16

前言

目前主要有

• vue响应式原理
• virtual-dom
• template到DOM

注: 每个模块里都包含了对vue源码对应部分的解析,还包含了一个简单的小例子;

需要知道的一些javaScript基础

flow.js

vue源码中经常能看到 下面的这种代码

乍一看还以为是TypeScript,查了一下,是flow.js;关于flow.js的介绍可以直接查看文档flow.js

代码中使用 flow 进行接口类型标记和检查，在打包过程中移除这些标记。

我们可以看看 vue 的作者 对于 选择 flow 而不是 typescript 的原因

vue 源码为什么选择 flow 来完成

Object.protoType

Object.defineProperty()

直接在一个对象上定义一个新属性，或者修改一个对象的现有属性 Object.defineProperty(obj, prop, descriptor)

Object.getOwnPropertyDescriptor()

返回指定对象上一个自有属性对象的属性描述符（自有属性是直接赋予该对象上的属性，不需要从原型链上进行查找的属性）

Object.create()

创建一个新的对象，使用现有的对象来提供新创建对象的ProtoType 例如 var a = Object.create(null)a就是一个没有原型的对象，调用a.toString()就会报错，因为toString()方法是定义在原型上的

Object.keys()

apply, call

instanceof

判断是哪种类型的对象

slice, splice

slice(start, end); 方法可从已有的数组中返回选定的元素。 不会改变原始数组

arrayObject.splice(index,howmany,item1,.....,itemX); 方法向/从数组中添加/删除项目，然后返回被删除的项目。 会改变原始数组;

• index: 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
• 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
• item1, ..., itemX: 可选。向数组添加的新项目。

闭包

import, export 的复合写法:

在一个模块之中,先输入后输出同一个模块, import, export 语句可以写在一起;

export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

// 整体输出
export * from 'my_module';

上面代码中, import, export 语句可以结合在一起,写成一行,但是需要注意的是,写成一行后, foo和bar实际并没有导入当前模块,只是相对与外转发了这两个接口,导致当前模块不能使用foo和bar

Set和Map

Set里面没有重复值

isArray() isObject() Object.isExtensible(object)

• isArray(): 是否为数组,返回布尔值
• isObject(): 是否为对象
• Object.isExtensible(object): 是否可向对象添加新属性