两分钟看懂vue数据驱动dom

不论对于前端哪个框架，数据无疑是最重要的，以数据改变来驱动dom操作，从而尽量减少对dom本身的操作，使得开发人员所有的关注点都集中到了数据，而页面呈现仅仅是一种数据变化带来的映射，这样的代码将使得维护成本大大降低。在当今大部分的框架设计中，这一点也变得越来越成为前端发展的趋势。

vue官网深入响应式原理图片

第1步

vue追踪数据变化建立在将所有的data属性转化为getter/setter，如图中第1步所示，在组件渲染过程中，会把整个渲染过程中“接触”过的所有的数据属性进行转化，也就是将所有的数据转化为getter/setter（该部分对用户不可见，但是的确可以vue进行追踪依赖）。

第2步

每个组件实例都会有与之对应的watcher实例，在渲染过程中该watcher实例会将数据的getter进行收集，相当于每个data都在watcher中进行了注册，这是进行数据追踪的重要步骤。

第3步

由于在第二步中，所有的数据在watcher实例中完成了注册，所以这个watcher将会感知到这些数据的变化，当数据的setter被触发的时候，就会通知watcher。

第4步

当watcher感知到setter变化后，就会触发与他相关联的组件进行重新的渲染。

注：经过上面的步骤，既可以实现从组件初始渲染到数据完成绑定，在到页面数据变化而完成重新渲染的工作了。