Vue.js 源码全方位深入解析
https://ustbhuangyi.github.io/vue-analysis/
https://ustbhuangyi.github.io/vue-analysis/v2/prepare/
F:\Vue教程\Vue.js 源码全方位深入解析\第1章 准备工作
第1章 准备工作
1-2 准备工作.mp4
1-3 认识 Flow.docx
1-4 认识 Flow.mp4
服漏
npm i -g flow-bin
flow init
flow 运行
/@flow/ 表示需要flow检查的
git clone -b v2.5.0 https://github.com/vuejs/vue.git
1-5 Vue.js 源码目录设计
weex
1-6 Vue.js 源码目录设计.mp4
1-7 Vue.js 源码构建.docx
1-8 Vue.js 源码构建.mp4
rollup 咯 https://github.com/rollup/rollup
2.5.17-beta.0
1-9 从入口开始.docx
1-10 从入口开始.mp4
F:\Vue教程\Vue.js 源码全方位深入解析\第2章 数据驱动
第2章 数据驱动
2-1 数据驱动-文档.docx
2-2 数据驱动.mp4
GitHub - ustbhuangyi/vue-analysis: Vue.js 源码分析
2-3 new Vue 发生了什么-文档.docx
2-4 new Vue 发生了什么.mp4
用到什么就分析什么
2-5 Vue 实例挂载的实现-文档.docx
2-6 Vue 实例挂载的实现 .mp4
2-7 render-文档.docx
2-8 render.mp4
2-9 Virtual DOM-文档.docx
2-10 Virtual DOM.mp4
https://github.com/snabbdom/snabbdom
2-11 createElement-文档.docx
2-12 createElement.mp4
2-13 update-文档.docx
2-14 update .mp4
高手自己看代码学 不是视频...
3-1 组件化-文档.docx
3-2 组件化.mp4
3-3 createComponent-文档.docx
3-4 createComponent.mp4
3-5 patch-文档.docx
3-6 patch（上）.mp4
3-7 patch（下）.mp4
patch 的整体流程：createComponent->子组件初始化->子组件render-> 子组件 patch
activeInstance 为当前激活的vm实例；vm.$vnode为组件的占位vnode；vm._vnode 为组件的染 vnode
嵌套组件的插入顺序是先子后父
3-8 合并配置-文档.docx
3-9 合并配置（上）.mp4
3-10 合并配置（下）.mp4
外部调用场景下的合并配置是通过mergeOption，并遵循一定的合并策略
组件合并是通过initInternalComponent，它的合并更快
框架、库的设计都是类似，自身定义了默认配置，同时可以在初始化阶段传入配置，然后merge配置，来达到定制化不同需求的目的。
3-11 生命周期-文档.docx
3-12 生命周期.mp4
Vue.js的生命周期函数就是在初始化及数据更新过程各个阶段执行不同的钩子函数
在created钩子函数中可以访问到数据，在mounted钩子函数中可以访问到DOM，在destroyed钩子函数中可以做一些定时器销毁工作
3-13 组件注册-文档.docx
3-14 组件注册（上）.mp4
目标
了解组件注册的2种方式一一全局注册和局部注册
了解2种注册方式的差异
3-15 组件注册（下）.mp4
全局注册的组件可以任意地方使用，而局部注册的组件只能在当前组件内使用
通常组件库中的基础组件建议全局注册，而业务组件建议局部注册
3-16 异步组件-文档.docx
3-17 异步组件（工厂函数）.mp4
了解异步组件的实现原理
了解异步组件的3种实现方式
3-18 异步组件（Promise）.mp4
()=>import(.vue)
该"import'函数返回一个“Promise’对象。
3-19 异步组件（高级）.mp4
异步组件实现的本质是2次宣染，先渲染成注释节点，当组件加载成功后，再通过forceRender重新宣染。
异步组件3种实现方式中，高级异步组件的设计是非常巧妙的，它可以通过简单的配置实现了 loading，resolve，reject，timeout 4种状态
F:\Vue教程\Vue.js 源码全方位深入解析\第4章 深入响应式原理（上）
第4章 深入响应式原理（上）
4-1 深入响应式原理
4-2 深入响应式原理.mp4
4-3 响应式对象.docx
4-4 响应式对象（上）.mp4
4-5 响应式对象（下）.mp4
不能枚举 暗粉
响应式对象核心是利用了Object.defineProperty给对象的属性添加 getter和 setter
Vue会把props，data等变成响应式对象，在创建过程中，发现子属性也为对象则递归把该对象变成响应式
4-6 依赖收集.docx
4-7 依赖收集（上）.mp4
Dep
4-8 依赖收集（下）.mp4
依赖收集就是订阅数据变化的watcher的收集
依赖收集的目的是为了当这些响应式数据发送变化，触发它们的setter的时候，能知道应该通知哪些订阅者去做相应的逻辑处理
4-9 派发更新.docx
4-10 派发更新（上）.mp4
4-11 派发更新（下）.mp4
派发更新就是当数据发生改变后，通知所有订阅了这个数据变化的watcher执行update
派发更新的过程中会把所有要执行update的watcher推入到队列中，在nextTick后执行flush。
4-12 nextTick.docx
4-13 nextTick .mp4
nextTick是把要执行的任务推入到一个队列中在下一个tick同步执行
数据改变后触发宣染watcher 的update，但是watchers 的flush 是在nextTick 后，所以重新渲染是异步的
4-14 检测变化的注意事项.docx
4-15 检测变化的注意事项.mp4
data.obj.a对象数组 改变要 Vue.set arr.push()
内部push改变原生的
ob.dep.notify()手动去通知下
响应式数据中对于对象新增删除属性以及数组的下标访问修改和添加数据等的变化观测不到
通过Vue.set以及数组的API可以解决这些问题本质上它们内部手动去做了依赖更新的派发。
F:\Vue教程\Vue.js 源码全方位深入解析\第5章 深入响应式原理（下）
第5章 深入响应式原理（下）
5-1 计算属性 VS 侦听属性.docx
5-2 计算属性 VS 侦听属性（1）.mp4
5-3 计算属性 VS 侦听属性（2）.mp4
computed setter
5-4 计算属性 VS 侦听属性（3）.mp4
5-5 计算属性 VS 侦听属性（4）.mp4
watch:{
name:{
deep:true,
immediate:true,
sync:true,//同步 先执行 watch默认是异步的
}
}
5-6 计算属性 VS 侦听属性（5）.mp4
计算属性的本质是 computed watcher
侦听属性的本质是user watcher，它还支持deep，sync，immediate 等配置
计算属性适合用在模板演染中，某个值是依赖了其它的响应式对象甚至是计算属性计算而来；而侦听属性适用于观测某个值的变化去完成一段复杂的业务逻辑
5-7 组件更新.docx
5-8 组件更新（1）.mp4
5-9 组件更新（2）.mp4
5-10 组件更新（3）.mp4
组件更新的过程核心就是新旧vnode diff，对新旧节点相同以及不同的情况分别做不同的处理。
新旧节点不同的更新流程是创建新节点->更新父占位符节点->删除旧节点
新旧节点相同的更新流程是去获取它们的children，根据不同情况做不同的更新逻辑。
5-11 原理图.mp4
watch 也可以观察computed里面的变化
F:\Vue教程\Vue.js 源码全方位深入解析\第6章 编译（上）
第6章 编译（上）
6-1.mp4 函数柯里化的技巧
Vue.js在不同的平台下都会有编译的过程,因此
编译过程中的依赖的配置baseOptions 会有所不
同
Vue.js利用了函数柯里化的技巧很好的实现
了baseOptions 的参数保留。同样,Vue .js也是
利用函数柯里化技巧把baseCompile 函数抽出来,
把真正编译的过程和其它逻辑如对编译配置处理、
缓存处理等剥离开
6-4.mp4
ast 有一堆对象
let fu=Object.assign({},obj) 副本 小拷贝 第一次有效
柯里化 链式调用 在外面判断
6-5.mp4
para什么方法
6-6.mp4
6-7.mp4
提前请假....
6-8.mp4
6-9.mp4
math learn deep
软件工程.....
模糊数字 变 数字
6-10.mp4
dev text preview build reverse
qix zj
9x 1.5x
1 2 3s..zl
6-11.mp4
blog.shaochuancs.com/w3c-html5-content-model
标准原文：http://www.w3.org/TR/html5/dom.html#content-models
6-12.mp4
====>渲染成 p~div 兄弟元素F:\Vue教程\Vue.js 源码全方位深入解析\第7章 编译（下）
第7章 编译（下）
7-1.mp4
optimize哦可麦 性能优化
7-2.mp4
optimize的目标是通过标记静态根的方式，优化
重新染过程中对静态节点的处理逻辑。
optimize的过程就是就是深度遍历这个AST树，
先标记静态节点，再标记静态根。
7-3.mp4
codegen
了解 codegen 的目标
了解codegen 的整体流程
将ast树转换成代码阶段
7-4.mp4
7-5.mp4
7-6.mp4
总结
codegen的目标是把AST树转换成代码字符串
整个codegen过程就是深度遍历AST树根据不
同条件生成不同代码的过程，我们应该根据具体
一个case，走完一条主线即可。
F:\Vue教程\Vue.js 源码全方位深入解析\第8章 扩展（上）
第8章 扩展（上）
第八章event.avi
了解event的实现原理
了解DOM事件和自定义事件的区别
总结
event在编译阶段生成相关的data，对于DOM事
件在patch过程中的创建阶段和更新阶段执
行updateDOMListeners生成DOM事件；对
于自定义事件，会在组件初始化阶段通过
initEvents创建
原生DOM事件和自定义事件主要的区别在于添
加和删除事件的方式不一样，并且自定义事件的
派发是往当前实例上派发，但是可以利用在父组
件环境定义回调函数来实现父子组件的通讯
F:\Vue教程\Vue.js 源码全方位深入解析\第9章 扩展（中）
第9章 扩展（中）
第九章v-model.wmv
input +v-bind 输入中文有区别
普通插槽：在父组件编译和渲染阶段生成vnodes，所以数据的作用域是父组件实例，子组件渲染的时候直接拿到这些渲染好的vnodes
作用域插槽：父组件在编译和渲染阶段并不会直接生成 vnodes，而是在父节点vnode的data中保留一个scopedSlots对象，存储着不同名称的插槽以及它们对应的渲染函数，只有在渲染子组件阶段才会执行这个渲染函数生成 vnodes。
第10章 扩展（下）
第十章keep-alivel.wmv
keep-alive 组件是一个内置抽象组件，它的实现通过自定义 render 函数并且利用了插槽
keep-alive组件的渲染分为首次渲染和缓存渲染，当命中缓存，则不会再执行 created和mounted 钩子函数，而会执行 activated 钩子函数。销毁时也不会执行destroyed钩子函数，而会执行 deactivated 钩子函数
transition-group组件是为了做列表的过渡，它会渲染成真实的元素。
当我们去修改列表的数据的时候，如果是添加或者删除数据，则会触发相应元素本身的过渡动画，这点和
第11章 Vue-Router
第十一章.wmv
Vue 编写插件的时候通常要提供静态的 install 方法。
Vue-Router 的 install 方法会给每一个组件注入beforeCreated和destoryed钩子函数，在 beforeCreated 做一些私有属性定义和路由初始化工作。
路由初始化的时机是在组件的初始化阶段，执行到beforeCreate钩子函数的时候会执行router.init方法。然后又会执行 history.transitionTo方法做路由过渡
createMatcher 的的初始化就是根据路由的配置描述创建映射表，包括路径、名称到路由 record的映射关系。
match 会根据传入的位置和路径计算出新的位置，并匹配到对应的路由 record，然后根据新的位置和 record 创建新的路径并返回。
路由始终会维护当前的线路，路由切换的时候会把当前线路切换到目标线路，切换过程中会执行一系列的导航守卫钩子函数，会更改 url，同样也会渲染对应的组件，切换完毕后会把目标线路更新替换当前线路，这样就会作为下一次的路径切换的依据
第12章 Vuex
第十二章vuex.wmv
store就是一个数据仓库，为了更方便的管理仓库，我们把一个大的 store拆成一些 modules，整个modules是一个树型结构。每个module又分别定义了state，getters，mutations，actions，我们也通过递归遍历模块的方式都完成了它们的初始化。
Vuex提供这些API都是方便我们在对store做各种操作来完成各种能力，尤其是mapXXX的设计，让我们在使用API的时候更加方便，这也是我们今后在设计一些JavaScript库的时候，从API 设计角度中应该学习的方向
Vuex 从设计上支持了插件，让我们很好地从外部追踪 store 内部的变化，Logger 插件在我们的开发阶段也提供了很好地指引作用。当然我们也可以自己去实现Vuex的插件，来帮助我们实现一些特定的需求。
标签：docx,Vue,js,mp4,源码,组件 From： https://www.cnblogs.com/KooTeam/p/18606636