解读vue源码第一篇 查找vue的构造函数所在位置

解读源码vue 第一篇查找vue构造函数位置
1 找到pagkage.json文件下的 dev命令 下的script/config.js配置文件
“dev”: “rollup -w -c scripts/config.js --environment TARGET:web-full-dev”
在这里插入图片描述

2 config.js配置文件下找到123行web-full-dev的开头》》entry: resolve(‘web/entry-runtime-with-compiler.js’)
在这里插入图片描述

3 entry-runtime-with-compiler.js在src 》platforms》web 》entry-runtime-with-compiler.js
说明: 当前文件只要是扩展覆盖$mount的编译 返回render渲染函数
当前引入了 import Vue from ‘./runtime/index’ 继续查找

4 runtime/index文件
说明:这里主要是对$mount的实现 最重要的就是mountComponent方法会更新替换 用虚拟dom经过diff算法替换真实的dom
**说明:**当前引入了import Vue from ‘core/index’ 继续查找文件
在这里插入图片描述

5 core/index当前文件在src 》core》index.js
说明:这里主要是混入一些vue的静态公用api 比如常用的use函数 extend函数 mixin混入函数等
继续查找import Vue from ‘./instance/index’
在这里插入图片描述

6 instance/index文件
**说明:**这里就是最重要的声明vue构造函数的地方 它这里只执行了this._init方法就是初始化vue的
_init其实就是调用了文件init.js的initMixin方法 在vue构造器原型上挂载了_init方法
在这里插入图片描述
下期带大家过一遍vue的响应式原理响应式是vue的一大核心或者手写一个响应式的dom给大家理解

发布了12 篇原创文章 · 获赞 5 · 访问量 4278
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览