/miniVue

在尽可能保持与vue2.x项目结构一致的同时，精简非核心代码，通过案例的形式描述vue核心（解析器-优化器-生成器-render函数-vnode-patch）闭环流程，易于对比vue项目分析了解内部详细实现过程，方便在遇到疑难杂症的时候帮助我们有条不紊的分析问题，解决问题。

Primary LanguageJavaScript

解密 Vue2

了解架构与过程，熟悉核心如何实现

  • 1: 架构设计
  • 2: 创建Vue实例时做了什么
  • 3: 变化侦测做了什么
  • 4: 模板编译做了什么
  • 5: 异步更新做了什么

一：架构设计

  • 架构设计

二：创建Vue实例时做了什么

  • 初始化阶段 [ new Vue() => created() ]
    • initLifecycle() => 初始化实例属性 vm.$parent、vm.$root、vm.$children、vm.$refs...
    • initEvents() => 初始化事件 v-on...
    • initRender() => 初始化渲染函数 vm.$createElement...
    • callHook('beforeCreated') => 生命周期beforeCreated
    • initState() => 初始化状态 props、methods、data、computed、watch...
    • callHook('created') => 生命周期created
  • 模板编译阶段（只存在于完整版）[ create() => beforeMount() ]
    • parser => 解析器 生成AST
    • optimize => 优化器 找出所有静态节点并标记
    • generate => 代码生成器 通过AST生成代码字符串
  • 挂载阶段 [ beforeMount() => mount() ]
    • patch
  • 已挂载 [ beforeUpdate() => update() ]
    • patch
  • 卸载阶段 [ beforeDestroy() => destroy() ]

三：变化侦测做了什么

  • 什么是变化侦测
  • 变化侦测的原理（对象、数组）
  • 如何收集依赖
  • 依赖收集在哪里

四：模板编译做了什么

  • parser => 解析器 生成AST
    • 解析方式 开始标签开始、开始标签结束、文本、结束标签
    • 推入、推出栈 来维护层级关系（保证每当触发钩子函数start时，栈的最后一个节点就是当前构建的节点的父节点）
  • optimize => 优化器 找出所有静态节点并标记
  • generate => 代码生成器 通过AST生成渲染函数

五：异步更新做了什么

  • patch
    • 渲染函数 To 虚拟DOM
    • 虚拟DOM diff 
      规则：
1. 平级diff
2. 深度遍历
    • patch 
      规则：
1. 创建新增节点
    a. 旧的没有，新的有，执行新增
    b. 旧的和新的不是同一个，新增新的，删除旧的
2. 删除废弃节点
    a. 删除旧的
3. 更新已有节点
    a. 都是静态节点则跳过
    b. 有文本属性，比较更新
    c. 没有文本属性，递归比较子节点