# 本阶段安排

• 3月20日 周日：Vue3架构设计响应式原理、reactive、effect、watch、computed、ref原理
• 3月23日 周三：掌握Vue3源码源码调试技巧，掌握响应式中数组、map、set处理
• 3月25日 周五：手写自定义渲染器原理及RuntimeDOM中属性、事件处理
• 3月27日 周日：手写虚拟DOM原理、手写Vue3中diff算法及最长递增子序列实现原理
• 3月30日 周三：手写组件渲染原理、组件挂载流程、及异步渲染原理
• 4月1日 周五：手写Vue3中生命周期原理，props、emit、slot实现原理。
• 4月3日 周日：详解Vue3中编译优化、patchFlags、blockTree，实现靶向更新。 手写模板转化ast语法树
• 4月6日 周三: 手写编译原理的转化逻辑、及代码生成原理
• 4月8日 周五：手写Vue中异步组件原理、Teleport、keep-alive实现原理
• 4月10日 周日：掌握Vuex及VueRouter实现原理
• 4月10日-4月17日TS详解 TS中类型、接口、泛型、高级类型、自定义类型、声明文件等
• 4月20日-4月24日全面掌握Vue3+TS 编写组件 实现表单组件、插件等

# Vue设计思想

• Vue3.0更注重模块上的拆分，在2.0中无法单独使用部分模块。需要引入完整的Vuejs(例如只想使用使用响应式部分，但是需要引入完整的Vuejs)， Vue3中的模块之间耦合度低，模块可以独立使用。 拆分模块
• Vue2中很多方法挂载到了实例中导致没有使用也会被打包（还有很多组件也是一样）。通过构建工具Tree-shaking机制实现按需引入，减少用户打包后体积。 重写API
• Vue3允许自定义渲染器，扩展能力强。不会发生以前的事情，改写Vue源码改造渲染方式。 扩展更方便

依然保留Vue2的特色

# 声明式框架

Vue3依旧是声明式的框架，用起来简单。

命令式和声明式区别

• 早在JQ的时代编写的代码都是命令式的，命令式框架重要特点就是关注过程
• 声明式框架更加关注结果。命令式的代码封装到了Vuejs中，过程靠vuejs来实现

声明式代码更加简单，不需要关注实现，按照要求填代码就可以 （给上原材料就出结果）

- 命令式编程：
let numbers = [1,2,3,4,5]
let total = 0
for(let i = 0; i < numbers.length; i++) {
  total += numbers[i] - 关注了过程
}
console.log(total)

- 声明式编程：
let total2 = numbers.reduce(function (memo,current) {
  return memo + current
},0)
console.log(total2)

# 采用虚拟DOM

传统更新页面，拼接一个完整的字符串innerHTML全部重新渲染，添加虚拟DOM后，可以比较新旧虚拟节点，找到变化在进行更新。虚拟DOM就是一个对象，用来描述真实DOM的

const vnode = {
    __v_isVNode: true,
    __v_skip: true,
    type,
    props,
    key: props && normalizeKey(props),
    ref: props && normalizeRef(props),
    children,
    component: null,
    el: null,
    patchFlag,
    dynamicProps,
    dynamicChildren: null,
    appContext: null
} 

# 区分编译时和运行时

• 我们需要有一个虚拟DOM，调用渲染方法将虚拟DOM渲染成真实DOM （缺点就是虚拟DOM编写麻烦）
• 专门写个编译时可以将模板编译成虚拟DOM （在构建的时候进行编译性能更高，不需要再运行的时候进行编译，而且vue3在编译中做了很多优化）