深⼊响应式原理

痛定思痛。 2022-05-14 04:09 143阅读 0赞

前⾯    2    章介绍的都是    Vue    怎么实现数据渲染和组件化的，主要讲的是初始化的过程，把原始的数据最 终映射到    DOM    中，但并没有涉及到数据变化到    DOM    变化的部分。⽽    Vue    的数据驱动除了数据渲染 DOM    之外，还有⼀个很重要的体现就是数据的变更会触发    DOM    的变化。 其实前端开发最重要的    2    个⼯作，⼀个是把数据渲染到⻚⾯，另⼀个是处理⽤户交互。Vue    把数据渲 染到⻚⾯的能⼒我们已经通过源码分析出其中的原理了，但是由于⼀些⽤户交互或者是其它⽅⾯导致 数据发⽣变化重新对⻚⾯渲染的原理我们还未分析。

![70][]

![70 1][]

![70 2][]

![70 3][]

![70 4][]

![70 5][]

![70 6][]

![70 7][]

![70 8][]

总结

这⼀节我们介绍了响应式对象，核⼼就是利⽤        Object.defineProperty        给数据添加了    getter    和 setter，⽬的就是为了在我们访问数据以及写数据的时候能⾃动执⾏⼀些逻辑：getter    做的事情是依赖收 集，setter    做的事情是派发更新，那么在接下来的章节我们会重点对这两个过程分析。

## 依赖收集  ##

![70 9][]

![70 10][]

![70 11][]

![70 12][]

![70 13][]

![70 14][]

![70 15][]

![70 16][]

![70 17][]

考虑到    Vue    是数据驱动的，所以每次数据变化都会重新    render，那么        vm.\_render()        ⽅法⼜会再次执 ⾏，并再次触发数据的    getters，所以        Wathcer        在构造函数中会初始化    2    个        Dep        实例数 组，    newDeps        表⽰新添加的        Dep        实例数组，⽽        deps        表⽰上⼀次添加的        Dep        实例数组。 在执⾏        cleanupDeps        函数的时候，会⾸先遍历        deps    ，移除对        dep        的订阅，然后把        newDepIds    和        depIds        交换，    newDeps        和        deps        交换，并把        newDepIds        和        newDeps        清空。 那么为什么需要做        deps        订阅的移除呢，在添加        deps        的订阅过程，已经能通过        id        去重避免重复 订阅了。

考虑到⼀种场景，我们的模板会根据        v-if        去渲染不同⼦模板    a    和    b，当我们满⾜某种条件的时候渲 染    a    的时候，会访问到    a    中的数据，这时候我们对    a    使⽤的数据添加了    getter，做了依赖收集，那么当 我们去修改    a    的数据的时候，理应通知到这些订阅者。那么如果我们⼀旦改变了条件渲染了    b    模板， ⼜会对    b    使⽤的数据添加了    getter，如果我们没有依赖移除的过程，那么这时候我去修改    a    模板的数 据，会通知    a    数据的订阅的回调，这显然是有浪费的。           因此    Vue    设计了在每次添加完新的订阅，会移除掉旧的订阅，这样就保证了在我们刚才的场景中，如 果渲染    b    模板的时候去修改    a    模板的数据，a    数据订阅回调已经被移除了，所以不会有任何浪费，真的 是⾮常赞叹    Vue    对⼀些细节上的处理。

总结

通过这⼀节的分析，我们对    Vue    数据的依赖收集过程已经有了认识，并且对这其中的⼀些细节做了分 析。收集依赖的⽬的是为了当这些响应式数据发送变化，触发它们的    setter    的时候，能知道应该通知哪 些订阅者去做相应的逻辑处理，我们把这个过程叫派发更新，其实        Watcher        和        Dep        就是⼀个⾮常 经典的观察者设计模式的实现，下⼀节我们来详细分析⼀下派发更新的过程。

## 派发更新  ##

![70 18][]

![70 19][]

![70 20][]

![70 21][]

![70 22][]

![70 23][]

![70 24][]

所以这就是当我们去修改组件相关的响应式数据的时候，会触发组件重新渲染的原因，接着就会重新 执⾏        patch        的过程，但它和⾸次渲染有所不同，之后我们会花⼀⼩节去详细介绍。

总结

通过这⼀节的分析，我们对    Vue    数据修改派发更新的过程也有了认识，实际上就是当数据发⽣变化的 时候，触发    setter    逻辑，把在依赖过程中订阅的的所有观察者，也就是        watcher    ，都触发它们的    update        过程，这个过程⼜利⽤了队列做了进⼀步优化，在        nextTick        后执⾏所有        watcher        的    run    ，最后执⾏它们的回调函数。    nextTick        是    Vue    ⼀个⽐较核⼼的实现了，下⼀节我们来重点分 析它的实现。

## nextTick ##

![70 25][]

![70 26][]

![70 27][]

![70 28][]

![70 29][]

## 检测变化的注意事项 ##

![70 30][]

![70 31][]

![70 32][]

![70 33][]

总结

通过这⼀节的分析，我们对响应式对象⼜有了更全⾯的认识，如果在实际⼯作中遇到了这些特殊情 况，我们就可以知道如何把它们也变成响应式的对象。其实对于对象属性的删除也会⽤同样的问题， Vue    同样提供了        Vue.del        的全局    API，它的实现和        Vue.set        ⼤相径庭，甚⾄还要更简单⼀些，这 ⾥我就不去分析了，感兴趣的同学可以⾃⾏去了解。

## 计算属性    VS    侦听属性  ##

![70 34][]

![70 35][]

![70 36][]

![70 37][]

![70 38][]

![70 39][]

![70 40][]

![70 41][]

![70 42][]

![70 43][]

![70 44][]

![70 45][]

## 组件更新  ##

![70 46][]

![70 47][]

![70 48][]

## 新旧节点不同  ##

![70 49][]

![70 50][]

![70 51][]

![70 52][]

![70 53][]

![70 54][]

![70 55][]

![70 56][]

![70 57][]

![70 58][]

![70 59][]

![70 60][]

![70 61][]

总结

组件更新的过程核⼼就是新旧    vnode    diff，对新旧节点相同以及不同的情况分别做不同的处理。新旧节 点不同的更新流程是创建新节点->更新⽗占位符节点->删除旧节点；⽽新旧节点相同的更新流程是去获 取它们的    children，根据不同情况做不同的更新逻辑。最复杂的情况是新旧节点相同且它们都存在⼦节  
组件更新  
  
点，那么会执⾏        updateChildren        逻辑，这块⼉可以借助画图的⽅式配合理解。

![70 62][]

[70]: /images/20220514/843b20f415374afb84dcf0e1160a9152.png
[70 1]: /images/20220514/45c85fbf530e42969a34746fbbc66415.png
[70 2]: /images/20220514/39549cc9669141cebc16baace4591ccf.png
[70 3]: /images/20220514/ddaa61a0b389450dbdeee93a7f02c831.png
[70 4]: /images/20220514/35113bb198d74424a3ff5b58fc853f5f.png
[70 5]: /images/20220514/2150663135b64081b709faca205309f2.png
[70 6]: /images/20220514/6893b589d03c4ea7a2118b0297ef7ce8.png
[70 7]: /images/20220514/920e717df8964191a55d80c2bf6805cb.png
[70 8]: /images/20220514/1983bcd3c67240ec8c438e62b9dfddb2.png
[70 9]: /images/20220514/8eb3b8d7fed548549d46e3dbe23e6b8e.png
[70 10]: /images/20220514/6fa872f9e61941169b71f468ff6b0c72.png
[70 11]: /images/20220514/462cea2cc95a4b318a4aa09c680b425d.png
[70 12]: /images/20220514/b34ceffd0a834a0ab1e6667c64392ed1.png
[70 13]: /images/20220514/549fc211dd69491287b83a940949fee2.png
[70 14]: /images/20220514/aa9cedd736fe4efa87467b60fa83078b.png
[70 15]: /images/20220514/b93a044eab324f36956a0ce52c8dd256.png
[70 16]: /images/20220514/904fa7410287437b8b78a8d3bac1644d.png
[70 17]: /images/20220514/bb63155164644339ba9b1a81dcc81404.png
[70 18]: /images/20220514/7c6f181188bf4b9bbcb0cab0dc642dc2.png
[70 19]: /images/20220514/90bbdca89a8443c880b866fdff09cd1a.png
[70 20]: /images/20220514/c63e4d7d221a401f98cab62ac1bfa3e5.png
[70 21]: /images/20220514/168e0f93990b4fd9b4a03e2917d14f45.png
[70 22]: /images/20220514/faa14cad6a1745188678fe334068c0e9.png
[70 23]: /images/20220514/1a49ce79d0dd47578cbb0f2ef8f5d9e0.png
[70 24]: /images/20220514/58847654047a45be9aebf143528ad6f3.png
[70 25]: /images/20220514/5e5b227c03ee4bf7a428dd4e8fa5d778.png
[70 26]: /images/20220514/d471cefbbaf84e0680a45e1b0cba3d96.png
[70 27]: /images/20220514/302dec9132e74f7998f7faee1e5ea2f7.png
[70 28]: /images/20220514/c03b30cfc4654f9f8bc6b322e4d70807.png
[70 29]: /images/20220514/449209a9987c4cffb3ad36949cce6d07.png
[70 30]: /images/20220514/7a71ddf4fbeb405da9a4ce8a5308182d.png
[70 31]: /images/20220514/f7144a49fa0b41a6aaa1bc61ecfae73b.png
[70 32]: /images/20220514/6495cfc54ecf464e937a473d745b3a35.png
[70 33]: /images/20220514/e2c9278219374fdf82687802470e3b49.png
[70 34]: /images/20220514/7332958b75794f91a65bba94244dbcd1.png
[70 35]: /images/20220514/49e934c681f4468b9602e0addaf4f35f.png
[70 36]: /images/20220514/fb83953c55b649d2b83bd4a7ae744c12.png
[70 37]: /images/20220514/ccff0c45ec524db2a590c79101e6cef9.png
[70 38]: /images/20220514/68c81844ee0f4ecf871cd04aea88e804.png
[70 39]: /images/20220514/445e5cf8b3ae4655a58e59b828cf8967.png
[70 40]: /images/20220514/cf0cb17471f24850a5658dffff25cc22.png
[70 41]: /images/20220514/9409a94cfaa2424c9a30eac104894a7a.png
[70 42]: /images/20220514/b96cb9c101df41b497866f6e4bf5a4b1.png
[70 43]: /images/20220514/6c52d8bf5a4c4978a0a9441314124204.png
[70 44]: /images/20220514/80c8b05df5414fa98e9d7143a434cf7a.png
[70 45]: /images/20220514/2817dad299d2444f851935f5761a7f9e.png
[70 46]: /images/20220514/7259eb5dcee141f5a0bd1704e76b112b.png
[70 47]: /images/20220514/bb12fe28b8ca4cf7b6780815d4e1109e.png
[70 48]: /images/20220514/d746a025ab2948a0935755148c3a6008.png
[70 49]: /images/20220514/acbc080093fd4195a78a66ae5f1a3347.png
[70 50]: /images/20220514/fdb15137740f47db97eb0abeee980f8e.png
[70 51]: /images/20220514/4ffe6225ef9f4c90a257b79242877930.png
[70 52]: /images/20220514/86f418c58df14c9e8bc4c4bb9745a412.png
[70 53]: /images/20220514/33cdc2b47f7c406d8a9d1b8e7e58b803.png
[70 54]: /images/20220514/0d6181b349d24fe5bd74064843edba29.png
[70 55]: /images/20220514/95634361dd0945f4948b60134a435dc1.png
[70 56]: /images/20220514/dab5df2ac2f94e45923ad37fcca929e0.png
[70 57]: /images/20220514/e946ff8aa0f842da859d6402e6149cfb.png
[70 58]: /images/20220514/4b8d24558a3e4231bada9942a0377737.png
[70 59]: /images/20220514/168f6d5133a145a0bb67be086ed56382.png
[70 60]: /images/20220514/4115b6324c6b4276a6fd452597806aa5.png
[70 61]: /images/20220514/fd6ab35bb25c40fbb544d69afd7ea134.png
[70 62]: /images/20220514/91ece2beac3347e8933e7f517fcf6301.png