效果

简单供测试的代码：
image.png

点击按钮改变数据，视图响应发生变化

before
image.png
————————————————————————————————————————————————
after
image.png
全程没有操控dom而视图更新了
接下来就是进入源码看这到底是如何实现的

数据的变动

设置代码断点：
image.png

F11进入 可以看到执行了Object.defineProperty的set方法
image.png

F11进入set，可以看到最后走了dep.notify()
image.png

这里已经完成了数据的变化，后续是通知进行更新。什么时候被观察的点击这里

数据变更后的通知

F11进入dep.notify()，循环所有触发了的Watcher进行update()，这里就是message一个

image.png

F11进入这个函数
image.png

F11进入nextTick()
image.png

看一下文档，更新dom就是这个了
image.png

进入nextTick函数
后续有虚拟dom的对比等比较麻烦 不看了

数据什么时候被监测的

在new Vue实例的时候进入
image.png

Vue构造函数进入_init这里初始化了一些选项
image.png

进入initData这里初始化数据
image.png

由函数名猜测出在这里进行了数据观测
image.png

进入这个类
image.png

注释：观察者类它附加到每个观察的对象上。附加后，观察器将对这个对象的属性键转换为getter/setters收集依赖项并分派
image.png
进入walk函数
这个函数会吧对象的属性转换为getter/setters
image.png
进入defineReactive函数，这里应该就是把数据转换为getter/setter并在数据变更后触发事件进行更新的地方
进去看看！
image.png

在这个函数中中先是实例化了一个Dep进去看一下这个类中是什么
image.png

出来看一下，下边就是Vue响应的核心jsAPI Object.defineProperty
在get的时候执行dep.depend, depend方法可以从上边的Dep中看出是把this追加到Dep.target中，是什么时候触发了get，target又是什么呢看这里
image.png

依赖收集

众所周知Object.definedproperty在读取变量时候触发的get，页面首次加载什么时候被读取的呢？
待续…