Vue1
2025年01月04日
一、vue.js 1.0
1.1 响应式
通过 Object.defineProperty: 负责数据的拦截。getter 时进行依赖收集，setter 时让 dep 通知 watcher 去更新。Dep: Vue data 选项返回的对象，对象的 key 和 dep 一一对应。Watcher: key 和 watcher 是一对多的关系，组件模版中每使用一次 key 就会生成一个 watcher。当数据更新时，dep 通知 watcher 去直接更新 DOM，因为这个版本的 watcher 和 DOM 时一一对应关系，watcher 可以非常明确的知道这个 key 在组件模版中的位置，因此可以做到定向更新，所以它的更新效率是非常高的。
虽然更新效率高，但随之也产生了严重的问题，无法完成一个企业级应用，理由很简单：当你的页面足够复杂时，会包含很多的组件，在这种架构下就意味这一个页面会产生大量的 watcher，这非常耗资源。