恢复更新--vue源码系列1之如何看源码

年过完了，是时候学习了（狗头）。

---

前言

本系列为vue 2.6 版本的源码分析系列

一、前提

你总不能一个vue 的项目也没写过吧

二、如何看

1.学会断点debuger

巧妙运用这个你会发现看源码会轻松很多。（相信我如果不是很快你就从入门到放弃）
为什么？ vue里面做了很多性能优化，参数初始化的工作，如果你全部看完，那你估计要花很久。当然你是大牛就算了。
这里发别对vue.js和未打包的vue 举例，个人喜欢两个结合看。

1. 官网vue.js
   新建一个html 引入vue.js ,谷歌浏览器打开

    <div id="root">
        {{name}}
    div>
    <script>
        debugger
        new Vue({
            el: '#root',
            data: {
                name: 233
            },
        })
    script>

点击右侧箭头，进去慢慢看，也可以点跳过一个函数。
你可以在vue.js 里面ctrl+f 找到你要看的部分打上debugger

2. 未打包源码打断点

• 下载源码
  
• 修改 package.json dev 后面加上 --sourcemap
  
• npm install

这个时候就可以进src里面打debugger
比如src/core/instance/index.js

• npm run dev

记住每次debugger 修改后都重新run 一下
刷新新的vue.js

• 浏览器打开index.html
  

2. 整体看代码

注重目的，代码执行的逻辑，而不是细节。建议第一遍整体逻辑，具体功能再看一些小细节。

（示例）：new Vue() 后的逻辑其实是很清晰的，以后再述。

debugger

function Vue(options) {
    if (process.env.NODE_ENV !== 'production' &&
        !(this instanceof Vue)
    ) {
        warn('Vue is a constructor and should be called with the `new` keyword')
    }
    this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

3. 结合别人的vue源码解释

自己看不懂的别人可能就看懂了，多交流。

总结

多看多练 : )