配置调试环境

启用sourceMap

image.png
image.png

运行代码

yarn 运行命令 yarn dev启动代码image.png

会生成dist文件，我们需要的是这两个
image.png

源码下新建index.html，引入这两个文件

  1. <body>
  2.   <div id="app">
  3.     {{ message }}
  4.   </div>
  6.   <script src="../dist/vue.js"></script>
  7.   <script>
  8.     var app = new Vue({
  9.       el: '#app',
  10.       data: {
  11.         message: 'Hello Vue!'
  12.       }
  13.     })
  14.   </script>
  15. </body>

ok可以在chrome的sources中看到map源代码
image.png

调试代码

在 source里打上断点这里是18行
step into next function
image.png

进入了index.js页面，可以看到构造函数Vue

step into next function
进入这个vue原型上的方法
image.png

image.png

image.png

可以看到生命周期，事件，渲染器，inject的初始化函数，先不管
step into next function
进入 initState()
image.png

可以看到初始化props，methods，先不管，进入initData()
image.png
image.png

进入observe观测数据
image.png

进入这个类
image.png

进入这个Dep类
image.png

image.png

继续走进入walk
image.png

image.png

进入defineReactive()
image.png

使用Object.definedProperty监测get时候在dep这个Dep类生成的实例上调用depend()添加依赖，set的时候通知notice()触发依赖

继续走，要return了 可以看一下ob是什么内容
image.png

不看其余的，先看这个$mount挂载这个问题
image.png

step into next function
image.png

进入compileToFunctions看看
image.png

进入compile看看
image.png

进入baseCompile看看，我猜测他就是编译成语法树的函数
image.png

进入prase他应该就是编译到语法树了
image.png