+ DFSTraverse(G) 对图G中进行深度优先遍历，在遍历过程对每个顶点调用
+ HFSTraverse(G) 对图G中进行广度优先遍历，在遍历过程对每个顶点调用
+```
+
+### 习题
+1. 已知：先序 ABCDEF 中序 CBAEDF 求后序
+2. 已知：中序 ABCDEF 后序 BDCAFE 求先序
+
+思路
+
+先序和后序确定根结点，找到根结点后在中序找到左右子树，然后重新查找根结点
\ No newline at end of file
diff --git a/docs/basic/0x02.md b/docs/basic/0x02.md
new file mode 100644
index 0000000..52546b7
--- /dev/null
+++ b/docs/basic/0x02.md
@@ -0,0 +1,90 @@
+## 逆波兰表达式
+```go
+// 中缀转后缀
+func pre2Post() *[]string {
+ slice := strings.Split("")
+ stack := Stack.NewStack(20)
+ var slice2 []string
+ for _, val := range slice {
+ if isOperation(val) {
+ if (val != ")") {
+ now := stack.GetValue()
+ if now == "+" || now == "-" {
+ stack.Push(val)
+ } else {
+ var popEle string
+ stack.Pop(&popEle)
+ slice2 = append(slice2, popEle)
+ }
+
+ } else {
+ for ele := stack.Pop(&ele); ele != "(" {
+ slice2 = append(slice2, ele)
+ }
+ }
+ } else {
+ slice2 = append(slice2, val)
+ }
+ }
+}
+// 后缀表达式
+func postFun() {
+ nums := []string{"9", "3", "1", "-", "3", "*", "+", "10", "2", "/", "+"}
+ stack := Stack.NewStack(20)
+
+ for _, val := range nums {
+ if isOperation(val) {
+ var prev, next int
+ stack.Pop(&next)
+ stack.Pop(&prev)
+ result := operation(prev, next, val)
+ stack.Push(result)
+ } else {
+ num, _ := strconv.Atoi(val)
+ stack.Push(num)
+ }
+ }
+ fmt.Println(stack.GetValue())
+}
+// 辅助方法
+func operation(a, b int, opt string) int {
+ switch opt {
+ case "-":
+ return a - b
+ case "+":
+ return a + b
+ case "*":
+ return a * b
+ case "/":
+ return a / b
+ default:
+ panic("wrong operation")
+
+ }
+}
+
+func isOperation(str string) bool {
+ slice := []string{"+", "-", "*", "/"}
+ for _, val := range slice {
+ if val == str {
+ return true
+ }
+ }
+ return false
+}
+```
+没有泛型是真的不方便
+
+中缀表达式 (栈用来进出运算的符号)
+* 定义当前元素 ele
+* 数字类型直接输出
+* 遇到 **(** 进栈 遇到 **)** 开始出栈输出,直到 **(** 出栈为止
+* 如果当前栈顶元素 比 ele 优先级低 ("* /" < "+ -"),入栈
+* 如果当前栈顶元素 比 ele 优先级高 (如果栈顶), 则出栈所有栈中元素,直到栈空, 然后将当前元素入栈
+* 如果当前栈顶元素 和 ele 优先级相等, 输出当前元素
+* 当前元素为 nil 后，出栈输出到队尾
+
+后缀表达式 (栈用来进出运算的数字)
+* 定义当前元素 ele
+* 如果 ele 是数字类型入栈
+* 如果 ele 是运算符类型 出栈两个元素(一定是数字类型), 第一个出栈的元素为b, 第二个出栈的元素为a, (a opt b)将得到结果入栈
\ No newline at end of file
diff --git a/docs/basic/0x03.md b/docs/basic/0x03.md
new file mode 100644
index 0000000..237ac1a
--- /dev/null
+++ b/docs/basic/0x03.md
@@ -0,0 +1 @@
+## KMP模式匹配算法
diff --git "a/docs/basic/\347\256\227\346\263\225\346\200\235\350\267\257\346\212\245\345\221\212.md" "b/docs/basic/\347\256\227\346\263\225\346\200\235\350\267\257\346\212\245\345\221\212.md"
new file mode 100644
index 0000000..52b33e2
--- /dev/null
+++ "b/docs/basic/\347\256\227\346\263\225\346\200\235\350\267\257\346\212\245\345\221\212.md"
@@ -0,0 +1,21 @@
+算法思路报告
+
+### 题目
+
+### 例子
+
+### 题目假设
+
+### 重要问题
+
+### 直觉
+### 解决方案可行性
+### 数据结构
+
+### 复杂度
+
+### 其他解法
+
+### 可能的follow-up
+
+### 代码
\ No newline at end of file
diff --git "a/docs/react\347\254\224\350\256\260/TS\344\270\213\344\275\277\347\224\250react-loadable.md" "b/docs/react\347\254\224\350\256\260/TS\344\270\213\344\275\277\347\224\250react-loadable.md"
new file mode 100644
index 0000000..258937c
--- /dev/null
+++ "b/docs/react\347\254\224\350\256\260/TS\344\270\213\344\275\277\347\224\250react-loadable.md"
@@ -0,0 +1,38 @@
+```typescript
+// /src/Treasure
+export default class Treasure extends React.Component {
+ public render() {
+ return (
+ Treasure
+ )
+ }
+}
+```
+
+```typescript
+// /src/App
+import * as Loadable from 'react-loadabel'
+import ReactLoading from 'react-loading'
+
+const Treasure = Loadable({loader: () => import('/src/Treasure'), loading: ({ type, color }) => })
+class App extends React.Component{
+ public render() {
+ return (
+
+ )
+ }
+}
+ReactDOM.render(
+ ,
+ document.getElementById('root') as HTMLElement
+)
+```
+
+
+```bash
+npm install babel-plugin-import --dev
+```
+
+1. 安装 baebl-plugun-imort 插件，否则会报不识别 import() 错误
+2. 路由级组件一定要通过 export default 默认导出，否则TS下import会报找不到组件的错误
+3. Loadable配置项必须有 loading 参数，推荐 react-loading
\ No newline at end of file
diff --git "a/docs/react\347\254\224\350\256\260/\344\273\216highlight\346\265\205\350\260\210webpack\346\214\211\351\234\200\345\212\240\350\275\275.md" "b/docs/react\347\254\224\350\256\260/\344\273\216highlight\346\265\205\350\260\210webpack\346\214\211\351\234\200\345\212\240\350\275\275.md"
new file mode 100644
index 0000000..e5b4270
--- /dev/null
+++ "b/docs/react\347\254\224\350\256\260/\344\273\216highlight\346\265\205\350\260\210webpack\346\214\211\351\234\200\345\212\240\350\275\275.md"
@@ -0,0 +1,109 @@
+
+## 前言
+最近有在使用 highlight.js 做代码的高亮展示，主要是展示对 SQL 语言的处理。看了看 highlight.js 的提供的相关代码
+
+
+
+
+因为只需要加载对应语言的种类，以及一种样式，所以我们希望 webpack 能够按需加载
+
+## 按需加载的实践
+
+### 完全加载
+为了对比出按需加载究竟能帮助我们节约多少资源，我们先贴出没有按需加载的代码
+```typescript
+// 忽略一些无关的代码
+import * as hljs from 'highlight.js/lib/highlight'
+import 'highlight.js/styles/atom-one-light.css'
+
+export class Highlight extends React.Component {
+
+ public componentDidMount() {
+ hljs.highlightBlock((this.code as any))
+ }
+
+ public render() {
+ return (
+ this.code = ref} style={{marginTop: 20}}>
+ {this.props.content}
+
+ )
+ }
+}
+```
+这是一份完整的加载，我们看看最后的数据有多大(包含完整引用的 antd 文件，我在项目中使用了 antd )
+
+
+
+### 按需加载
+接着我们按照官方的 demo 实现按需加载
+```typescript
+import * as hljs from 'highlight.js/lib/highlight'
+import * as javascript from 'highlight.js/lib/languages/javascript'
+hljs.registerLanguage('javascript', javascript)
+```
+其他的部分和上文相同，区别在于，没有从整个 highlight 中加载，而是引用了部分文件以及需要注册的 javascript 语言部分，默认是加载包含所有语言版本的 hljs ，看看这下的打包大小
+
+
+
+我们可以看到，使用按需加载将近节省了600KB的空间，而使用按需加载的引入方式是
+```import * as XXX from 'module/lib/xxx'```。并且使用 ```import { xx } from 'moduls'``` 并不能触发 webpack 的 treeshake，webpack仍然会打包完整库，哪怕引用的仅仅是从库里导出的接口(在ECharts下是如此表现的)。我们看看按需引用 antd 里的组件会是什么情况
+
+### 部分按需引用
+上面1.78MB的打包体积是 ```import { Card } from 'antd'```(如gif效果图，我用Card包裹了高亮组件),接着我们看看
+```typescript
+import Card from 'antd/lib/card'
+```
+
+这种方式最后的打包体积
+
+
+
+妈耶，居然这么小。
+
+### 小结
+1. 如果要实现按需加载得使用[babel-plugin-import](https://github.com/ant-design/babel-plugin-import),这个在TS下的情况还没有检查过
+2. 使用TS时，因为某些库的 d.ts 文件 指向的路径是模块，因此要导入该库的接口只能完整的导入该模块，比如ECharts，这个问题目前暂时还未解决
+
+## 动态加载的实践
+上面只是按需加载部分的JS，并且通过字符串写死的方式指定了路径，还有一部分，如同CSS的部分需要在组件生成时动态加载，或者通过变量的形式加载。如下所示
+```typescript
+ constructor(props) {
+ super(props)
+ require('highlight.js/styles/' + this.props.css)
+ }
+
+ static async getDerivedStateFromProps(nextProps) {
+ // const css = await import('highlight.js/styles/' + nextProps.css)
+ const css = require('highlight.js/styles/' + nextProps.css)
+ console.log(css)
+ return null
+ }
+```
+我们在构造阶段通过props传过来的变量加载对应的CSS文件，之前是使用```import 'highlight.js/styles/atom-one-light.css'```的方式，我们看看两者打包体积的区别
+
+
+
+
+通过指定加载的CSS体积大小是427KB，而动态加载的体积大小是484KB。动态加载的体积要比静态加载的体积大很多。分析一下webpack打包的行为
+
+webpack始终结合关键字并按照静态地址信息进行打包。比如```require('highlight.js/styles/' + nextProps.css)```
+require是关键字，接下来 webpack 会对 require 这个函数中的入参进行分析，它会发现入参有两个部分构成， 一部分是硬编码的 'highlight.js/styles/' 另一部分是不可知的变量。webpack将会以硬编码部分为打包入口，将'highlight.js/styles/*'下所有文件打包，在运行时根据完整的路径记载资源。
+
+所以我们没办法使用完全的变量 require(variable)，因为这样webpack找不到打包的路径。
+
+### 缺陷
+效果图虽然能看到我们通过 Select 的选择按需加载 CSS 样式，但其实是有缺陷的，表现为右侧可以看到，动态加载的CSS是通过一个个style标签加载上去的，这样后面的样式效果会覆盖前面的。表现为 当 Select 又选到已经加载的样式时， 浏览器并不会重新加载那段代码，导致样式无效。这个问题在另一个组件中得到了解决
+[react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter)
+
+还没来得及看具体的实现，不过我估计应该是使用了 CSS-MODULES，明天再看看
+
+### 没来得及验证的部分
+有注意到 我在使用 ```const css = await import('xxx')```,```const css = require('xxx')```,这两者的表现上是有区别的，前者是一个Promise对象，后者直接返回了值，这就涉及到了一个同步和异步的问题，虽然最后打印出来都是 {}， 不过这是因为没有使用CSS modules的原因。以后再研究研究 import require 动态加载时的区别
+
+## 总结
+1. ```import { Card } from 'antd'```并不会触发按需加载,仍然会加载全部antd文件,应该使用```import Card from 'antd/lib/Card'```
+2. 使用变量加载```require('highlight.js/styles/' + this.props.style)``` webpack会打包 ```'highlight.js/styles/*'```下所有文件
+3. 猜想 在TS下即使只从某个库里引用接口, ```import { IXxx } from 'xxx'```,webpack仍然会打包所有的 'xxx' 文件(在ECharts的表现下如此)
+
+以上都是我瞎编的
\ No newline at end of file
diff --git "a/docs/react\347\254\224\350\256\260/\346\265\205\350\260\210React16\347\224\237\345\221\275\345\221\250\346\234\237.md" "b/docs/react\347\254\224\350\256\260/\346\265\205\350\260\210React16\347\224\237\345\221\275\345\221\250\346\234\237.md"
new file mode 100644
index 0000000..a36f71b
--- /dev/null
+++ "b/docs/react\347\254\224\350\256\260/\346\265\205\350\260\210React16\347\224\237\345\221\275\345\221\250\346\234\237.md"
@@ -0,0 +1,35 @@
+
+## 代码
+```typescript
+class React {
+ static getDerivedStateFromProps(nextProps, nextState) {
+ console.log('%c getDerivedStateFromProps', "color:#97de95")
+ console.log(nextProps, nextState)
+ return null
+ }
+
+ public shouldComponentUpdate(nextProps, nextState): boolean {
+ console.log('%c shouldComponentUpdate', "color:#08c299")
+ console.log(this.props, this.state)
+ console.log(nextProps, nextState)
+ // 具有缓存效应
+ return true
+ }
+
+ public getSnapshotBeforeUpdate(preProps, preState): any {
+ console.log('%c getSnapshotBeforeUpdate', "color:#0960bd")
+ console.log(preProps, preState)
+ return preProps.name
+ }
+
+ public render() {
+
+ }
+
+ public componentDidUpdate(preProps, preState, val) {
+ console.log('%c componentDidUpdate', "color:#571179")
+ console.log(preProps, preState, val)
+ }
+}
+```
+## 结论
\ No newline at end of file
diff --git a/docs/resume.md b/docs/resume.md
index 665ee29..f0ad239 100644
--- a/docs/resume.md
+++ b/docs/resume.md
@@ -1,54 +1,80 @@
## 简历
### 个人信息
-* **姓名** Treasure
-* **微信号** TreasureTesla(备注招人)
+* **姓名** 吴明骏
+* **微信号** TreasureTesla
+* **电话** 13550038728
+* **邮箱** treasurewmj@foxmail.com
+* **Github** https://github.com/MrTreasure
* **毕业院校** 成都大学 数字媒体技术 本科
-* **期望工作地点** 成都 上海
+* **毕业时间** 2017-07
+* **个人荣誉** 2019 中国 JSConf 受邀讲师；知乎前端话题下活跃回答者
+* **意向** 中台开发 serverless
+
### 技能简介
-1. 熟练HTML+CSS+JS开发（前端本职）
-2. 熟练Vue全家桶开发，根据业务需求自定义组件；使用过React mobx开发
-3. 熟练使用Typescript开发，并在vscode下调试（后端项目均使用TS编写）
-4. 熟悉node的基本模块，熟练使用Koa搭建web服务器
-5. 掌握mysql，mongodb，redis在node环境下的开发使用
-6. 了解密码学常用概念，并使用crypto块完成了各自的实现
-7. 掌握基本的linux环境命令，有过linux部署经验
-8. 知乎社区前端话题活跃回答者，github社区活跃用户，简书博主
+1. 熟练 HTML+CSS+JS开发（前端本职）
+
+2. 熟练 Vue React 开发，掌握其实现原理，了解其设计思想；目前主要使用 typescript + hooks；
+ 结合部门业务特点，封装了常用的业务组件并在团队内部进行推广；
+
+ 平时也负责 review 代码，给出性能优化等相关建议；
+
+3. 熟悉 HTTP 协议，掌握缓存控制、CORS、HTTPS 等网络编程基础知识；
+
+ 深入了解 cookie 等前后端权限校验机制，解决不同项目中授权认证等问题；
+
+4. 熟悉 nodejs go 开发，能够完成基本后端开发，掌握后端开发具备的理论知识及相关工程知识
### 工作经历
-• 2017年10月——至今 深圳竹云科技有限公司 前端工师
-公司的项目为大型身份认证管理系统，我在其中负责后台管理页面开发。入职以前，公司还是传JSP页面，由后台负责前端业务逻辑，UI老旧。入职后进行vue框架的推广，投入公司新开的项目通过vue的组件复用，数据驱动，前后端分离等特性，快速完成了开发。前后端解耦也使得逻辑更清晰，有利用后期模块的扩展。并且将相关开发经验及使用到的库整理成文档，在全公司推广
+• 2018年9月——至今 阿里本地生活 资深前端工程师
-• 2017年6月——2017年10月 成都畅联九洲科技有限公司 前端工程师
-
-公司主要负责大数据收集，前端负责可视化展现。通过vue的钩子函数进一步封装了echarts组件，使得每个图形化模块可以根据数据驱动并且多处复用。同时处理了PC端和移动端兼容性问题。完成了两个月在PC和微信公众号的上线
+ FI前端基础设施部门下的大数据组，负责大数据部门的业务开发工作，参与项目的评审与设计。有丰富的大数据产品落地经验，掌握了使用各种技术赋能用户；
+ 搭建可视化报表系统（中台类型，前端配置生成网站）供一线用户使用。
+
+ 对接过 ECharts、Antv 等各种图表制作；深入了解过 Antv-G6,熟悉流程图，脑图开发，参与过 GGEditor 贡献；完成高德地图等相关开发。
+ 同时也参与部门建设，不限于团队招聘、指导新人、review 等相关工作
+
+
+• 2017年10月——2018年9月 深圳竹云科技有限公司 前端工程师
+
+ 公司的项目为大型身份认证管理系统，我在其中负责后台管理页面开发；
+
+ 入职以前，公司还是传JSP页面，由后台负责前端业务逻辑，UI老旧；
-### 项目经历
-• 2018年3月——2018年4月 互联网用户管理系统
+ 入职后进行vue框架的推广，投入公司新开的项目通过vue的组件复用，数据驱动，前后端分离等特性，快速完成了开发。前后端解耦也使得逻辑更清晰，有利用后期模块的扩展。并且将相关开发经验及使用到的库整理成文档，在全公司推广
-该项目是对企业的互联网用户进行统一的管理，权限授取。根据业务的需求，
-二次开发及重写了树型组件、穿梭框组件、表格组件，参考elementUI的设计方式，结合我司后台供的数据结构，针对性的编写了符合要求的组件
-该项目对用户数据的修改管理也较为复杂，因此在前端的表单编辑有着较为严格的限制。项目中用了动态表单的生成（根据后台的数据要求，生成表单数据，使用了适配器转换数据结构），并涉及到了动态的表单校验与提交
-• 2017年12月——2018年2月 安全通讯录
+### 主要项目经历
+•2019年5月至今 策略中台
- 1. 参与项目需求设计，协商讨论restful风格接口在该项目的实现
- 2. 设计并开发项目中的可复用组件，如名片和多个弹窗组件
-该项目是企业级的通讯录展示系统，涉及到的痛点有用户数据庞大，用户可访问的权限限制，用信息的动态渲染
-针对以上特点，在进行前端页面设计时，充分考虑了数据节流以及懒加载，避免不必要的DOM渲染通过axios的拦截器等多种手段统一拦截判断用户有无可访问的权限避免不必要的网络请求；
+ BU 内各团队需要借助大数据的能力，精确的找出符合条件的各种商户、BD、物流等对象。
-• 2017年10月——2017年 11月 Epass认证管理后台系统
+ 在此背景下，我主导了策略中台前端部分的建设，并且联合产品、后端定义中台组件不同项目之间交互、通信的方案。前端封装了核心的筛选逻辑，并通过 npm 包的形式提供给接入方使用，节省了接入方前端的开发时间；和后端的交互统一封装成为了 service 层，提高了项目的维护性，接入方也能通过查询参数之间获取相关的数据信息。
- 1. 参与项目需求设计，与后台协商定义接口约定
- 2. 根据需求制定前端的整体模块架构，以及开发规范
- 3. 打包完成后通过nginx部署，不再需要后台支持
-这是新公司的第一个项目，因此领导比较重视。该项目主要作用是定义终端设备登录时的动态认规则，涉及指纹、手势、声纹、二维码、短信、OTP、帐号多种登录方式。管理台本身支持所有的证方式。我在其中实现了动态设置登录选项，并且能够根据后台判定的风险级别，动态增加额外证措施。
-不同的用户具有不同的操作权限，根据后台返回的权限列表，在前端实现了按钮级的操作权限限制
-管理台还实现了用户行为记录，风险提醒模板编辑，表格数据的导入导出等
+ 目前该策略中台在 BU 内部多端都有使用，累计接入方达 10+，如商户补贴、高风险商户预警等。项目完成后，我也进行了相关复盘，分享了[《从 0 到 1 搭建业务中台》](https://zhuanlan.zhihu.com/p/181641511)的经验
+
+•2020年1月至今 新雷达门户
+
+ 该项目前身是一个老的门户网站，主要提供各种图表看板给一线城市经理、BD 用于业务分析。老项目中数据结构不合理，后端返回的数据中包含了前端样式相关信息，导致后端开发时间成本高；组件复用率低，同一个组件项目中多次出现不同的代码 copy，往往修改一处别处还会出现故障；前端开发效率低，明明相差不大的页面却需要重复开发。针对以上痛点，联合产品、后端等对项目进行重构。
+
+ 整理出了通用的数据结构， 封装了常用的业务组件。数仓直接对数据结构进行出数，减少了后端接入的过程；
+
+ 提出了配置式开发理念。前端不再关心具体的值直接由组件根据业务属性进行适配。相关的组件也推广到了其他项目中使用；
+
+ 提效以后，原本项目的迭代需要 3 个前端同学，现在只需要 1 到 2 个同学完成。目前新雷达门户已经作为大数据平台拳头产品，在 BU 内部推广
+
+### 阿里师兄
+
+ 在工作中担任过阿里师兄，负责带实习生。针对实习生制定了一系列的学习内容，包括了 gitflow 流程、框架背后原理分析、后端交互场景、项目评审和产品需求分析等。实习生目前已顺利转正。
### 个人评价
-1. 除了前端开发以外，个人时间大部分投入到node、后台服务的学习
-2. 活跃于开源社区，在知乎的前端话题下积极回答问题，帮助新人解决前端相关的问题及疑惑，能巩固自身的知识基础；将个人在学习中的感悟，一些实践整理成文档发布在简书以及知乎专栏热衷于github的开源分享，仿照eggjs模块，在项目ts-koa中实现了部分模块功能，并且加入eggjs开发者组织。也通过github向日常使用的库提出issue，帮助开发者完善库的功能和bug
-3. 学习typescript加强JS语言开发的严谨性，避免一些低级错误，同时也极大的拓展了JS在OO方向，元编程方向的学习经验，在这方面收获颇丰
-在node方面主要研究node在微服务框架中的应用，自身所处的位置。作为一个API网关的应用，并且对微服务，云计算等有着浓厚的兴趣
\ No newline at end of file
+
+ 项目经历主要集中在可视化(前端搭建、复杂图表、脑图、流程图)以及组件化赋能（拆分、整合业务单元供多个业务线使用）方向，个人也保持着对前沿技术学习。主要在于微前端、serverless 方向。并且部门推崇 "工程师" 理念，学习的方向也不仅仅局限于前端方向，从 HTTP 入手，学习并掌握 nodejs 和 go 语言的 web 开发。
+
+ 在平常的业务开发中也比较注重相关经验积累，内网编写了相关实践 10 余篇帮助团队内同学快速填坑，提升团队同学的开发效率；
+
+ 深入了解过部门后端内部服务间通信，也经常协助测试、后端同学定位、解决线上问题；
+
+ 平常也关注前端社区、帮助社区新人进步，学习前沿的前端理论，并思考如何作用于公司的业务。之前也有维护部门的知乎专栏、微博号等
+
diff --git "a/docs/vue\347\254\224\350\256\260/01.md" "b/docs/vue\347\254\224\350\256\260/01.md"
new file mode 100644
index 0000000..2d09c51
--- /dev/null
+++ "b/docs/vue\347\254\224\350\256\260/01.md"
@@ -0,0 +1,74 @@
+
+## 构造Vue
+```javascript
+function Vue (opts) {
+ // 一些检查this指向代码
+ this._init(opts)
+}
+
+initMixin(Vue)
+stateMixin(Vue)
+eventsMixin(Vue)
+lifecycleMixin(Vue)
+renderMixin(Vue)
+```
+```javascript
+export function initState (vm: Component) {
+ vm._watchers = []
+ const opts = vm.$options
+ if (opts.props) initProps(vm, opts.props)
+ if (opts.methods) initMethods(vm, opts.methods)
+ if (opts.data) {
+ initData(vm)
+ } else {
+ observe(vm._data = {}, true /* asRootData */)
+ }
+ if (opts.computed) initComputed(vm, opts.computed)
+ if (opts.watch && opts.watch !== nativeWatch) {
+ initWatch(vm, opts.watch)
+ }
+}
+```
+初始化顺序 props -> methods -> data -> computed -> watch
+
+## stateMixin
+```javascript
+// 做 data 属性和 props 属性的代理
+const dataDef = {}
+const propsDef = {}
+
+// 定义三个方法
+Vue.prototype.$set = set
+Vue.prototype.$delete = del
+Vue.prototype.$watch = function() {}
+```
+
+## eventsMixin
+```javascript
+// 定义事件相关
+Vue.prototype.$on = function() {}
+Vue.prototype.$once = function() {}
+Vue.prototype.$off = function() {}
+Vue.prototype.$emit = function() {}
+```
+
+## lifecycleMixin
+```javascript
+// 注册和生命周期相关的API
+Vue.prototype._update = function() {}
+Vue.prototype.$foreceUpdate = function() {}
+Vue.prototype.$destroy = function() {}
+```
+
+## renderMixin
+```javascript
+// 一些列 render 相关方法
+
+Vue.prototype.$nextTick = function() {}
+Vue.prototype._render = function() {}
+```
+
+## 小结
+1. 利用类似装饰者模式修改 Vue 的原型，优点在于使得逻辑清晰，每一个 Mixin 只负责自己的部分
+2. 主要给 Vue 原型添加 API 方法，以及添加 Vue 的静态属性
+3. 目前为止都是纯 JS 层面操作，没有涉及浏览器相关的 API
\ No newline at end of file
diff --git "a/docs/vue\347\254\224\350\256\260/02.md" "b/docs/vue\347\254\224\350\256\260/02.md"
new file mode 100644
index 0000000..391d714
--- /dev/null
+++ "b/docs/vue\347\254\224\350\256\260/02.md"
@@ -0,0 +1,282 @@
+## 规范化
+1. 检查组件名称是否符合要求(避免和HTML标签名冲突, 避免和内置组件冲突)
+2. 规范化 props inject directive,将数组或者对象规范化为统一的结构
+3. props 的初始化优先于 data 的初始化
+
+```javascript
+vm.$options = mergeOptions(
+ // resolveConstructorOptions(vm.constructor)
+ {
+ components: {
+ KeepAlive
+ Transition,
+ TransitionGroup
+ },
+ directives:{
+ model,
+ show
+ },
+ filters: Object.create(null),
+ _base: Vue
+ },
+ // options || {}
+ {
+ el: '#app',
+ data: {
+ test: 1
+ }
+ },
+ vm
+)
+```
+
+## 属性代理(不会代理以 _ 或 $ 开头的属性)
+```javascript
+export function proxy (target: Object, sourceKey: string, key: string) {
+ sharedPropertyDefinition.get = function proxyGetter () {
+ return this[sourceKey][key]
+ }
+ sharedPropertyDefinition.set = function proxySetter (val) {
+ this[sourceKey][key] = val
+ }
+ Object.defineProperty(target, key, sharedPropertyDefinition)
+}
+```
+
+## 关键函数
+```javascript
+/**
+ * Define a property.
+ */
+export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
+ Object.defineProperty(obj, key, {
+ value: val,
+ enumerable: !!enumerable,
+ writable: true,
+ configurable: true
+ })
+}
+
+/**
+ * Define a reactive property on an Object.
+ */
+export function defineReactive (
+ obj: Object,
+ key: string,
+ val: any,
+ customSetter?: ?Function,
+ shallow?: boolean
+) {
+ const dep = new Dep()
+
+ const property = Object.getOwnPropertyDescriptor(obj, key)
+ if (property && property.configurable === false) {
+ return
+ }
+
+ // cater for pre-defined getter/setters
+ const getter = property && property.get
+ const setter = property && property.set
+ if ((!getter || setter) && arguments.length === 2) {
+ val = obj[key]
+ }
+
+ let childOb = !shallow && observe(val)
+ Object.defineProperty(obj, key, {
+ enumerable: true,
+ configurable: true,
+ get: function reactiveGetter () {
+ const value = getter ? getter.call(obj) : val
+ if (Dep.target) {
+ dep.depend()
+ if (childOb) {
+ childOb.dep.depend()
+ if (Array.isArray(value)) {
+ dependArray(value)
+ }
+ }
+ }
+ return value
+ },
+ set: function reactiveSetter (newVal) {
+ const value = getter ? getter.call(obj) : val
+ /* eslint-disable no-self-compare */
+ if (newVal === value || (newVal !== newVal && value !== value)) {
+ return
+ }
+ /* eslint-enable no-self-compare */
+ if (process.env.NODE_ENV !== 'production' && customSetter) {
+ customSetter()
+ }
+ if (setter) {
+ setter.call(obj, newVal)
+ } else {
+ val = newVal
+ }
+ childOb = !shallow && observe(newVal)
+ dep.notify()
+ }
+ })
+}
+```
+```javascript
+const queue: Array = []
+let has: { [key: number]: ?true } = {}
+let waiting = false
+let flushing = false
+/**
+ * Push a watcher into the watcher queue.
+ * Jobs with duplicate IDs will be skipped unless it's
+ * pushed when the queue is being flushed.
+ */
+export function queueWatcher (watcher: Watcher) {
+ const id = watcher.id
+ if (has[id] == null) {
+ has[id] = true
+ if (!flushing) {
+ queue.push(watcher)
+ } else {
+ // if already flushing, splice the watcher based on its id
+ // if already past its id, it will be run next immediately.
+ let i = queue.length - 1
+ while (i > index && queue[i].id > watcher.id) {
+ i--
+ }
+ queue.splice(i + 1, 0, watcher)
+ }
+ // queue the flush
+ if (!waiting) {
+ waiting = true
+ nextTick(flushSchedulerQueue)
+ }
+ }
+}
+```
+每次添加watcher时检查是否存在，只加入不存在的watcher
+
+```javascript
+import { noop } from 'shared/util'
+import { handleError } from './error'
+import { isIOS, isNative } from './env'
+
+const callbacks = []
+let pending = false
+
+function flushCallbacks () {
+ pending = false
+ const copies = callbacks.slice(0)
+ callbacks.length = 0
+ for (let i = 0; i < copies.length; i++) {
+ copies[i]()
+ }
+}
+
+// Here we have async deferring wrappers using both microtasks and (macro) tasks.
+// In < 2.4 we used microtasks everywhere, but there are some scenarios where
+// microtasks have too high a priority and fire in between supposedly
+// sequential events (e.g. #4521, #6690) or even between bubbling of the same
+// event (#6566). However, using (macro) tasks everywhere also has subtle problems
+// when state is changed right before repaint (e.g. #6813, out-in transitions).
+// Here we use microtask by default, but expose a way to force (macro) task when
+// needed (e.g. in event handlers attached by v-on).
+let microTimerFunc
+let macroTimerFunc
+let useMacroTask = false
+
+// Determine (macro) task defer implementation.
+// Technically setImmediate should be the ideal choice, but it's only available
+// in IE. The only polyfill that consistently queues the callback after all DOM
+// events triggered in the same loop is by using MessageChannel.
+/* istanbul ignore if */
+if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
+ macroTimerFunc = () => {
+ setImmediate(flushCallbacks)
+ }
+} else if (typeof MessageChannel !== 'undefined' && (
+ isNative(MessageChannel) ||
+ // PhantomJS
+ MessageChannel.toString() === '[object MessageChannelConstructor]'
+)) {
+ const channel = new MessageChannel()
+ const port = channel.port2
+ channel.port1.onmessage = flushCallbacks
+ macroTimerFunc = () => {
+ port.postMessage(1)
+ }
+} else {
+ /* istanbul ignore next */
+ macroTimerFunc = () => {
+ setTimeout(flushCallbacks, 0)
+ }
+}
+
+// Determine microtask defer implementation.
+/* istanbul ignore next, $flow-disable-line */
+if (typeof Promise !== 'undefined' && isNative(Promise)) {
+ const p = Promise.resolve()
+ microTimerFunc = () => {
+ p.then(flushCallbacks)
+ // in problematic UIWebViews, Promise.then doesn't completely break, but
+ // it can get stuck in a weird state where callbacks are pushed into the
+ // microtask queue but the queue isn't being flushed, until the browser
+ // needs to do some other work, e.g. handle a timer. Therefore we can
+ // "force" the microtask queue to be flushed by adding an empty timer.
+ if (isIOS) setTimeout(noop)
+ }
+} else {
+ // fallback to macro
+ microTimerFunc = macroTimerFunc
+}
+
+/**
+ * Wrap a function so that if any code inside triggers state change,
+ * the changes are queued using a (macro) task instead of a microtask.
+ */
+export function withMacroTask (fn: Function): Function {
+ return fn._withTask || (fn._withTask = function () {
+ useMacroTask = true
+ const res = fn.apply(null, arguments)
+ useMacroTask = false
+ return res
+ })
+}
+
+export function nextTick (cb?: Function, ctx?: Object) {
+ let _resolve
+ callbacks.push(() => {
+ if (cb) {
+ try {
+ cb.call(ctx)
+ } catch (e) {
+ handleError(e, ctx, 'nextTick')
+ }
+ } else if (_resolve) {
+ _resolve(ctx)
+ }
+ })
+ if (!pending) {
+ pending = true
+ if (useMacroTask) {
+ macroTimerFunc()
+ } else {
+ microTimerFunc()
+ }
+ }
+ // $flow-disable-line
+ if (!cb && typeof Promise !== 'undefined') {
+ return new Promise(resolve => {
+ _resolve = resolve
+ })
+ }
+}
+```
+IOS下有一个bug，如果当前没有执行的 task 那么不会执行microtask
+
+
+## 数据的初始化
+* 根据 vm.$options.data 选项获取真正想要的数据（注意：此时 vm.$options.data 是函数）
+* 校验得到的数据是否是一个纯对象
+* 检查数据对象 data 上的键是否与 props 对象上的键冲突
+* 检查 methods 对象上的键是否与 data 对象上的键冲突
+* 在 Vue 实例对象上添加代理访问数据对象的同名属性
+* 最后调用 observe 函数开启响应式之路
\ No newline at end of file
diff --git "a/docs/vue\347\254\224\350\256\260/03.md" "b/docs/vue\347\254\224\350\256\260/03.md"
new file mode 100644
index 0000000..6c00328
--- /dev/null
+++ "b/docs/vue\347\254\224\350\256\260/03.md"
@@ -0,0 +1,48 @@
+## 解析模板
+1. start 钩子函数是当解析 html 字符串遇到开始标签时被调用的。
+2. 模板中禁止使用