all articles

read Vue.js source code a little more by Breakpoint Sharer - Chapter 1

2016-12-29 @sunderls

vue.js BreakpointSharer

想必大家都有通过debug阅读代码的经历,最近突发奇想觉得如果可以分享断点的,不失为一种新奇的阅读体验,所以花了一些时间做了一个分享断点的Chrome 扩展 Breakpoint Sharer,欢迎下载使用。代码也公开在了github,目前还只有最基本的功能,如果有功能建议或者bug反馈的话,欢迎在github创建issue或者pull。

今天我就用Breakpoint Sharer来分享一下我阅读Vue.js的过程,我其实并没有Vue.js的经验,最近看Vue.js小有人气,就试着读了一下代码。如果有任何浅薄或者错误的地方,欢迎评论指正。好的,我们开始吧。

第一步 安装 Breakpoint Sharer

Chrome WebStore 地址: https://chrome.google.com/webstore/detail/breakpoint-sharer/hkbgnljbklddbfmkmeaoolmdflbbofmi

由于Chrome 不支持store以外的安装,如果你被GFW挡住了的话,可以git clone https://github.com/sunderls/breakpoint-sharer.git,然后在chrome://extensions/中添加本地文件夹的方式来试用。

本地安装的话,不能自动更新。

第二步 导入断点配置

  1. 在本文的tab下,点击地址栏右边的 Breakpoint Sharer icon
  2. 这时应该能看到左边的js文件目录,点击其中的Vue.js,正文区会显示vue.js的源代码
  3. 点击「import」,贴入下面textrea的所有内容。
  4. 点击「GO」,可以看到「clear all」按钮中的断点数会不断增加,当其停止的时候就说明断点已经导入完毕了。

第三步 触发第一个应用

html

<div id="app-1">
  <p>{{ message }}</p>
  <input v-model="message" placeholder="input message"><button v-on:click="reverseMessage">reverse message</button>
</div>

js

var app1 = new Vue({
  el: '#app-1',
  data: {
    message: 'Hello Vue!'
  },
 methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
});

可以看出以上是一个及其简单的应用,input中的数据会显示在<p>标签中。


{{ message }}


以上是demo显示区域,如果Breakpoint已经导入完毕的话,点击 Start App1 就可以初始化第一个app。 初始化成功之后,Breakpoint Sharer窗口现在应该停留在某个断点,如下图:

第四步 查看断点

以上步骤完成过后,切换到Breakpoint Sharer的窗口就可以查看断点和相关说明了,像幻灯片一样点击 「resume」一个个看就好了。 关于Breakpoint Sharer的使用简单说明一下:

  1. 点击 「resume」 跳过这个断点,debugger会停留在下一个设置好的断点。
  2. 点击代码区域,Ctrl(Cmd) + F可以代码搜索,搜索匹配后,Ctrl(Cmd) + Shift + G可以查找下一个匹配。
  3. 点击行号可以添加 breakpoint,在下方的文字区域可以给这个breakpoint添加一小段评论。
  4. 点击「export」可以导出断点和评论,分享给其他同学。
  5. 下方的Console和Chrome 自己的console一样,可以执行一些代码,在遇到断点的时候查看断点所在scope的变量显得非常有用。

总结

我也是Vue初学者,通过上面的debug,我对Vue的执行有了如下了解(仅限于上述简单的app,包括组件等还没有涉及)

  1. Vue将传入的data转换为Observer,每个Observer都带有一个dep用来传递依赖,也就是告诉外界自身的变化,dep的注册过程将在data的getter里面完成,dep的callbak触发,在setter中完成。
  2. Vue将获取模版html,转换为render方法,render是virtualdom式(vnode)。
  3. Vue创建了根Watcher,callback为2中的render。watcher构造方法中会自动run一次callback ,这会导致:render被调用 => data中的属性 getter被调用 => 属性的dep和watcher建立关系。
  4. 当data的属性值发生变化时 => setter 被触发 => dep的callback(watcher)被触发 => watcher的callbak触发 => render被触发。

嗯,感觉明白了不少,不知道帮到了你没有。接下来的几次阅读,将涉及到模版渲染(vnode)、事件处理和Component,敬请关注。