VUE三个版本数据驱动更新视图机制对比

视图更新对比

vue1 小粒度更新，精确追踪到数据变化所影响的dom变化，精确更新变化的dom

• 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
• 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
• 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

具体的实现代码可前往： 实现一个简易版的vue1
也可以参考：vue早期源码学习

vue2 以组件粒度为范围，组件内diff式更新，组件层面还是按vue1的方式更新

具体区别体现在，每个组件有了render函数，数据变化时只通知到组件更新，组件更新时会重建全部
vnode树，而不是精确更新了（当然到dom层面时还是会做diff，同样表现为精确更新）

好处有：

1. render函数可以用js写组件，更灵活

2. 跨平台，vue1模板渲染方式依赖浏览器先解析vue模板

3. 如果要建立精确的数据–dom对应关系，需要占用大量内存维护directive，vue2可以节约这部分内存

4. 小粒度更新需要维护一个队列（当数据重复变化时）来避免不必要的操作，vue2不要维护这部分

vue3 优化了diff 算法

具体的内容可以前往：Vue3 性能比Vue2好的原因