年过完了,是时候学习了(狗头)。


前言

本系列为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

  1. 未打包源码打断点
  • 下载源码
    在这里插入图片描述
  • 修改 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源码解释

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

总结

多看多练 : )

Logo

前往低代码交流专区

更多推荐