vue源码起步:准备工作

使用了vue有了很长一段时间了,对于它深层次的理解仅仅停留在响应式实现,简单的Vnode概念这些,整体下来比较碎片化,如果想要真的沉淀一套框架的思想与技巧,需要从理解它的源码开始。初步翻开VUE源码,有种从入门就放弃的想法…因为不止从何下手,并且由于加入了flow检查语法的问题,有很多地方的代码看上去很奇怪;

不知道看源码有没有什么技巧,但是我确定的是一定要做好以下三方面的准备: 
 1 、了解前置知识点
 2、 源码目录结构的设计
 3、 Vuejs的构建方式

一、需要的前置知识点

在这里插入图片描述

  • flow的基本语法

大家都知道js是动态类型语言,过于灵活的副作用就不够严格,有些隐蔽需再编译器甚至看上去都不会报错,在运行阶段就会有bug;比如强制类型转换;类型检查是动态类型语言发展的趋势;类型检查就是在编译阶段就进行检查的。vue2.0重构的时候,在ES2015的基础上,除了ESlint保证代码风格之外,也引入了Flow做静态类型检查提高代码质量。之所以选择flow,主要是因为babel和eslint都有对应的flow插件以支持语法
flow的使用方式

类型推断: 通过变量的使用上下文来推断出变量类型,然后根据这些推断来检查类型
类型注释(常用): 事先注释好我们期待的类型,Flow 会基于这些注释来判断。

简单看个flow语法的例子(类型注释型)

function sum(a: number, b:number) {
  return a + b;  // a的类型是number,b的类型是number,函数的返回值类型是number
}

上面的代码我们可以看到多出了一个number的限制,标明了a\b的类型只能为number;如果不是number类型,执行flow检查就会报错
如果你知道这种写法是类型注释检查的语法,带着这个概念去读源码,其实还蛮容易看懂的,看上去没有那么的晦涩
比如下面这个函数的定义:

export function renderList (
  val: any,
  render: (
    val: any,
    keyOrIndex: string | number,
    index?: number
  ) => VNode
): ?Array<VNode>{
...
}

flow源码: https://github.com/facebook/flow

未完待续…每日更新…懒癌发作除外…

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值