手写 Vue 源码 === Vue3 设计思想
1.声明式框架
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);
2.采用虚拟 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
};
3.区分编译时和运行时
🔹 编译时 ：
将你写的模板语法（如 .vue 文件中的 <template> ）转换成 渲染函数 或 虚拟DOM结构 的阶段，由Vue编译器完成。
👉 例如：把 <div>{{msg}}</div> 编译成 h('div', msg) 这样的JS代码。
🔹 运行时 ：
浏览器中实际执行渲染函数、处理响应式数据更新、操作真实DOM的阶段，由Vue核心库完成。
👉 例如：当 msg 变化时，自动触发DOM更新。
💡 关键区别
-
编译时是代码构建阶段（开发时），运行时是代码执行阶段（浏览器中）
-
完整版Vue包含编译时+运行时，生产环境推荐用纯运行时版（体积更小）
📦 开发场景
用 vue-loader 编译 .vue 文件 → 编译时在打包阶段完成 → 浏览器只需运行时代码，性能更优！
- 我们需要有一个虚拟 DOM，调用渲染方法将虚拟 DOM 渲染成真实 DOM （缺点就是虚拟 DOM 编写麻烦）
- 专门写个编译时可以将模板编译成虚拟 DOM （在构建的时候进行编译性能更高，不需要再运行的时候进行编译，而且 vue3 在编译中做了很多优化）
4.Vue3 设计思想
- 拆分模块： Vue3.0 注重模块上的拆分 Vue3 中的模块之间耦合度低，模块可以独立使用。
- 组合式 API： 通过构建工具 Tree-shaking 机制实现按需引入，减少用户打包后体积。
- 扩展更方便： Vue3 允许自定义渲染器，扩展能力强。
- 采用 RFCopen in new window ： 使用 RFC 来确保改动和设计都是经过 Vuejs 核心团队探讨并得到确认的。也让用户可以了解每一个功能采用或废弃的前因后果。
Vue3 项目结构
