daixwu/vue-lab

Vue research laboratory

JavaScript

vue-lab

Vue research laboratory

Vue 构造函数（VueFunction）

Vue 构造函数的定义

Vue 构造函数原型扩展

Vue 构造函数全局API

Vue 平台化的包装

Vue 初始化 (Init)

Vue 初始化之开篇

Vue 初始化之选项规范化

Vue 初始化之选项合并

Vue 初始化之最终选项

Vue 初始化之渲染函数

Vue 初始化之 initLifecycle

Vue 初始化之 initEvents

Vue 初始化之 initRender

Vue 生命周期钩子的实现

Vue 初始化之 initState

Vue 数据驱动（DataDriven）

Vue 数据驱动

Vue $mount 挂载的开始

Vue mountComponent 执行组件挂载

Vue _render 渲染虚拟 Node

Vue createElement 创建 VNode

Vue _update 渲染真实 DOM

Vue 组件化（Component）

Vue 组件化开篇

Vue createComponent 创建组件 VNode

Vue patch 渲染组件 VNode 为真实 DOM

Vue 组件的合并配置

Vue 生命周期钩子函数的执行

Vue 组件注册

Vue 异步组件

Vue 响应式原理（Reactive）

响应式对象

Vue 数据响应系统开篇

initData 初始化 data

数据响应系统的基本思路

observe 工厂函数

Observer 构造函数

defineReactive 添加 getter 和 setter

get 函数如何收集依赖

set 函数如何触发依赖

响应式数据之数组的处理

set($set) 和 delete($delete) 的实现

依赖收集

Dep 管理 Watcher

Watcher 构造函数

依赖收集的过程

派发更新

派发更新的过程

queueWatcher 异步更新队列

nextTick 的实现

计算属性 VS 侦听属性

计算属性本质上是 computed watcher，而侦听属性本质上是 user watcher。就应用场景而言，计算属性适合用在模板渲染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑。

computed 计算属性的初始化

computed 计算属性的实现

watch 侦听属性的实现

Watcher 构造函数对 options 的处理

Vue 组件更新

Vue 组件更新过程

Vue Props

Vue Props 实现原理

Vue 编译

Vue 编译入口

Vue 编译之解析模板生成 AST

Vue 编译之优化 AST 树

Vue 编译之转换为可执行代码

渲染器

组件的本质

辅助创建 VNode 的 h 函数

渲染器之挂载

渲染器之patch

渲染器的核心 Diff 算法

自定义渲染器和异步渲染

Vue 扩展

Vue event 事件实现原理

Vue v-model 实现原理

Vue slot 实现原理

Vue keep-alive 实现原理

Vue transition 实现原理

Vue transition-group 实现原理

附录

Vue 源码目录设计

Vue 构造函数整理-全局API

Vue 构造函数整理-原型\

Vue 实例的设计

core/util 目录下的工具方法全解

shared/util.js 文件工具方法全解

platforms/web/util 目录下的工具方法全解

Vue-Router

Vue-Router 路由注册

VueRouter 对象

matcher 路径线路匹配

transitionTo 路径切换

Vuex

Vuex 操作store