一、整体渲染流程

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

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

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

一、 渲染器的基本概念

1. 与响应式的关系

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

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

vuex 的基本原理参考：手写 vuex 原理

基本原理参考：手写 vue-router 原理

本文章内容 vue-Router 的版本为 4.x，3.x 的基本原理可以参考vue-router 原理解析

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

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

1. 声明式 or 命令式

题目描述

补充函数的 TODO 部分，模拟 lodash 中的 _.get() 函数。

测试用例

输入：

const obj = { selector: { to: { toutiao: 'FE Coder' } }, target: [1, 2, { name: 'byted' }] };
get(obj, 'selector.to.toutiao', 'target[0]', 'target[2].name');