vue源码分析

1. 获取vue源码地址

项目地址：https://github.com/vuejs/vue

迁出项目： git clone https://github.com/vuejs/vue.git

当前版本号：2.6.10

2. 文件目录

3. 调试环境搭建
(1)、安装rollup： npm i -g rollup
(2)、修改dev脚本，添加sourcemap，package.json

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

(3)、运行开发命令： npm run dev

(4)、引入调试
引入前面创建的vue.js，samples/commits/index.html
接下来可以在浏览器愉快的调试代码了！

 ----->  

  
    
    
    
    
  
  
    

      
Latest Vue.js Commits
      
      
vuejs/vue@{{ currentBranch }}
      

        

          {{ record.sha.slice(0, 7) }}
          - {{ record.commit.message | truncate }}

          by {{ record.commit.author.name }}
          at {{ record.commit.author.date | formatDate }}
        
      
    
    
    
  

4. vue源码分析(浏览器运行)

通过rollup打包入口， config.js找到  web-full-dev 对应的入口： src\platforms\web\entry-runtime-with-compiler.js

分析方法： 流程图形式附加关键代码入口及注释等， 从vue初始化、响应式、虚拟dom、模板编译4个角度深入分析。

附上分析的流程图地址，大家可以直接打开阅读，用心就会有收获， fitting！

https://www.processon.com/view/5d491471e4b07f95f42b3631#map