我想观察vue文件从script标签引入之后到绑定div.app元素发生了什么
1.创建一个html文件(命名为：test-vue.html)，引入vue，并创建一个vue实例
2.我想要观察vue.js文件的执行步骤，所以这里需要在vue.js文件找一个恰当的地方打一个断点
为什么在这里？
这里是调用 new Vue 时执行的入口。
在此之前 Vue构造函数 已经完成了初始化,如下图。
-----------------------
最初我学习源码是通过npm安装的vue文件。在~node_modules/vue/src目录下，有良好的文件组织结构.
但是这个无法直接在浏览器中使用。
所以我选择了引入dist/vue.js文件。
3. 现在我们打开 test-vue.html ,按下 f12,刷新
4. 现在页面在我期待的位置（debugger）停了下来
并且我看到我们的div.app元素的内容是 {{title}}
说明vue的构造函数没有执行完成。
5. 在这个瞬间，我观察到 开发者工具右侧面板 有一些有意思的东西
我现在重点看一下 Call Stack和Scope
6. Call Stack 意思是 调用栈
我知道 栈 就是先进后出
现在，在调用栈中有两个 东西：vue和anonymous
vue我知道是我们调用的 new Vue（）被推进了调用栈
那 anonymous 是什么呢？
我点击了 anonymous 发现
回到了 test-vue.html文件，并且标记了 new
我可以猜测，new 其实也相当于创建了一个匿名函数，并且先调用了他，而new 又调用了 Vue（）
7. 回到 call stack 点击vue
我发现scope也发生了变化：从global变成了 global，closure，local
8. 我知道当前文档的执行停在了断点处，当前执行的函数是 Vue，call stack最上面的是 Vue
那scope是什么呢？
scope 是 范围 的意思。
我知道 函数不关心自己在哪里调用，只关心自己在哪里声明。
Vue这个函数在哪里声明的呢？
就在当前断点处。
为什么scope 中有三个 上下文context呢？
因为最外层当然是window 的全局环境，
第二个 closure 意为 闭包 ，说明 Vue函数的外层有一个匿名函数将它包裹起来，并形成了Vue的父级作用域context
第三个local 就是当前作用域context，就是Vue形成的context。
我点击了每个context，观察每个context环境下的变量，可以证实这一点。
9. closure的context
我发现了 Dep,Observe 在依赖收集是会用到的构造函数。
所以他们可以在 closure 内部的任何位置调用他们。
10. local的context
我来看一下local也就是当前Vue函数内部有哪些变量
有 option，this
option就是调用Vue传的参数，在Vue函数内部，option就是一个当前context的一个变量
this 就是当前context，通常this这个在普通函数内部没有多大意义
但是通过new 关键字，this变成了一个空对象，它的__proto__等于Vue.prototype
在某个文章中指出，我们不应该直接去改变__proto__,因为这样会导致性能问题
我试着直接在scoure面板的vue.js文件中的Vue函数内进行编辑
var a = 'a'
发现 scope的local的局部变量表中对了一个我刚才声明的a
11. 现在 按f11，到 this._init(options); 这一步，注意 call stack
12. 按f11，进入 _init 函数声明的地方
这时call stack 又推入了一个函数 _init
这个时候，scope应该会在_init函数（local），下还有一个 closure（闭包：initMixin）。
但是被chrome省略了，下图可以证实这一点。
我在initMixin内部声明了一个变量之后，这个initMixin闭包才显示出来。
13. 观察_init函数做了什么
进来后在scope local可以看到
这里的this指的 我最初new Vue产生的实例对象。
为什么在没有对Vue实例做任何操作的情况下，this会有$data,$isServer等半透明的属性？
这是因为 Vue.prototype拥有这些属性的get和set函数。
