源码分析
- 如何分析
- 健壮性分析(可以忽略源码的健壮性处理)：
- 参数，参数类型，默认参数，object.assign, {…o1, …o2}
- 易错操作(try…catch)
- 理清架构 -> 找到入口 -> 理出调用栈
- tips: this instanceof Constructor，保证是调用了 new 关键字
- 核心代码
- 找 return 和 调用部分
- 作用域链：减少作用域链查找的层级，提升性能
- 设计模式
- 工厂模式
- Vue 新特性
- 重写 vDOM
- 静态节点只在初次渲染，后续不再去进行重绘；动态节点会进行重绘；
- monorepo 方式去管理代码包：将多个 package 放在一个 repo 里；一大特点就是各模块内部有自己的 package.json；
- 核心代码库：packages
- compiler-core: 编译器核心（与平台不相关）
- compiler-dom: 针对浏览器的编译器
- compiler-ssr: 针对服务端渲染的编译器
- reactivity: 响应式（3.0 用 proxy 改写了）
- runtime-core: 运行核心（与平台不相关）
- runtime-dom: 针对浏览器的运行环境
- runtime-test: 测试运行环境
- server-render: 服务端渲染
- shared: 多个包间共享的公共方法
- 2.0-3.0的差异
- 2.0采用
new Vue(...options)，类调用的方式 - 3.0采用全局
Vue对象调用createApp方法；
- 2.0采用
![](./img/icon_wechat.png"){kind=icon}