- 看源码应该有目标，抓主要放次要，不然看着看着就乱了。
- flow文件开头通过
// @flow或者/* @flow */声明，语法和ts类似。 - vue.js源码打包工具使用的是Rollup比Webpack轻量；Webpack把所有文件（包括图片等）当作模块，Rollup只处理js文件更适合在Vue.js这样的库中使用；Rollup打包不会生成冗余代码，Webpack会生成一些 浏览器端支持的模块化代码。开发库适合用Rollup，开发项目适合用Webpack。
- 开启调试（在dev命令中加上
--sourcemap）可以在控制台source生成src目录直接调试。esModule是静态编译，可以在编译时就知道引入关系从而进行tree-shaking。编译器版本会帮忙把template语法转换成render函数，运行时版本只支持render函数，少了template转换代码所以更轻量效率更高。vue inspect > output.js将vue-cli封装的webpack配置输出到output.js文件里，可以看到导入的vue是运行时esm版本，因为效率更高。而vue单文件模板会转换成js对象，转换过程会把template处理成render函数，所以也不需要编译器。 - 获取el：如果传入的是字符串则直接调用querySelector获取，否则认为是节点直接返回。el不能挂载到document或者body上。如果传入的options里没有传render，则去将template转换成render函数。如果有则直接用mount挂载到dom上。
-
npm run build没有开启sourcemap无法调试。在控制台打断点，通过右侧call stack可以看到方法被谁调用了。可以看到$mount被new Vue()->Vue->Vue._init依次调用。 - platform处理的是跟平台相关的。主要是处理编译：定义了平台相关的入口；重写了$mount()方法；注册Vue.compile()方法，即传递html字符串返回render函数。
- 在Vue.options上导入平台相关的全局指令（v-model和v-show）和全局组件（v-transition、v-transition-group）。在Vue.prototype上绑定patch函数（将虚拟dom转换为真实dom的函数），再绑定$mount（将实dom渲染到界面上）。
- 给vue挂载全局静态方法，比如set、mixin等。
-
用构造函数创建了Vue（不用class是因为方便后面要给Vue原型增加内容）。然后给Vue混入了常用实例成员比如$data。
四个导出 - 关闭js验证（解决flow检验报错问题），用了泛型需要再安装Babel JavaScript解决部分不高亮问题；但无法快捷跳转。
-
Vue.options = Object.create(null)可以以null为原型创建对象提高性能。 - initUse为Vue增加use方法用于添加插件，内部就是直接调用传进来的plugin（如果是函数直接调用，如果是对象则调用它的install方法）。然后将该插件名存起来表示已经添加过该插件防止重复添加。
- initMixin为全局options添加mixin的内容。
-
initExtend给Vue增加extend方法，返回构造函数。实际上也是继承Vue的。
impicture_20210901_204010.png -
beforeCreate后去处理inject/provide/state，initState是去处理props/methods/data/computed/watch都注入到实例上。
impicture_20210901_204724.png - 入口文件可以从npm run dev的执行语句
rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev里面找。找到scripts/config.js里web-full-dev的配置。结合resolve方法找到别名，入口文件为src/platforms/web/entry-runtime-with-compiler.js。npm install http-server -g，通过http-server . -p 8000在vue源码文件夹启动本地服务器。控制台入口文件el = el && query(el)打断点，F5刷新运行调试，F11执行下一个步骤。 - 首次渲染：先找当前是否有节点，可以是字符串或者template或者节点。找到后获取节点的innerHTML，将其转换成render函数。
- 判断value是否非对象或非vnode，否则直接返回。否则判断value是否有ob，有则直接返回（相当于缓存），没有再observe处理。
observe实际上就是调用def处理value。def其实就是设置ob把所有属性用defineProperty弄一遍。如果是array则特殊处理，否则用walk设置getset并且收集依赖之类的。 - 在watcher对象的get方法中声明dep绑定target去dep.depend收集依赖。
三二vue笔记
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
