视图更新对比
vue1 小粒度更新，精确追踪到数据变化所影响的dom变化，精确更新变化的dom
- 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
- 实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
- 实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。
具体的实现代码可前往： 实现一个简易版的vue1
也可以参考：vue早期源码学习
vue2 以组件粒度为范围，组件内diff式更新，组件层面还是按vue1的方式更新
具体区别体现在，每个组件有了render函数，数据变化时只通知到组件更新，组件更新时会重建全部
vnode树，而不是精确更新了（当然到dom层面时还是会做diff，同样表现为精确更新）
好处有：
render函数可以用js写组件，更灵活
跨平台，vue1模板渲染方式依赖浏览器先解析vue模板
如果要建立精确的数据–dom对应关系，需要占用大量内存维护directive，vue2可以节约这部分内存
小粒度更新需要维护一个队列（当数据重复变化时）来避免不必要的操作，vue2不要维护这部分
vue3 优化了diff 算法
具体的内容可以前往：Vue3 性能比Vue2好的原因
版权声明：本文为haonan_z原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。