一、整体渲染流程

众所周知 vue 的渲染从其入口函数，即createApp(APP).mount('#app')开始，整体的大概流程如下所示：

无论是哪种 Diff 算法，都遵循同样的处理规则：

• 判断是否有节点需要移动，以及应该如何移动；（可复用的节点）
• 找出那些需要被添加或移除的节点。（其他的节点）

一、 渲染器的基本概念

1. 与响应式的关系

const count = ref(1);
effect(() => {
  renderer(`<h1>${count.value}</h1>`, document.getElementById('app'));
});
count.value++;

编译器将 源代码 翻译为 目标代码 的过程叫作编译（compile）。完整的编译过程通常包含词法分析、语法分析、语义分析、中间代码生成、优化、目标代码生成等步骤。

霍春阳《Vue.js 设计与实现》的笔记

一、vue 整体方向的选择（权衡）

1. 声明式 or 命令式

一、Vue 核心

1. MVVM 模型

(1). M：模型(Model)

Vue3 简介

• 2020 年 9 月 18 日，Vue.js 发布 3.0 版本，代号：One Piece（海贼王）
• 耗时 2 年多、2600+次提交、30+个 RFC、600+次 PR、99 位贡献者
• github 上的 tags 地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0

目录结构

├─src                    # 项目源代码
│    ├─complier          # 与模板编译相关的代码
│    ├─core              # 通用的、与运行平台无关的运行时代码
│    │  ├─observe        # 实现变化侦测的代码
│    │  ├─vdom           # 实现virtual dom的代码
│    │  ├─instance       # Vue.js实例的构造函数和原型方法
│    │  ├─global-api     # 全局api的代码
│    │  └─components     # 内置组件的代码
│    ├─server            # 与服务端渲染相关的代码
│    ├─platforms         # 特定运行平台的代码，如weexsh
│    ├─sfc               # 单文件组件的解析代码
│    └─shared            # 项目公用的工具代码

一、组件挂载

二、生成 vnode

一、 响应式数据与副作用函数

​ 副作用函数是指会产生副作用的函数，即它会直接或间接地影响其他函数的执行。