Vue技术点汇总

响应式数据

根据数据类型【数组和对象】进行不同处理。

1. 对象内部通过defineReactive方法，使用Object.defineProperty()监听数据属性的get进行数据依赖收集，再通过set完成数据更新。

2. 数组则通过重写数组方法实现。扩展7个变更方法（push/pop/shift/unshift/splice/reverse/sort），通过监听这些方法收集依赖和派发更新。

多层对象通过递归实现监听，Vue3使用proxy实现响应式数据。
响应式流程：defineReactive定义响应式数据；给属性增加dep收集对应的watcher；等数据变化进行更新。
dep.depend——get取值，依赖收集；dep.notify——set设置，通知视图更新。

性能优化点：1. 对象层级过深；2. 不需要响应式数据不放在data；3. Object.freeze可以冻结数据。