扩展

绝地灬酷狼 2022-05-14 04:11 200阅读 0赞

## event ##

## ... ##

## V-model ##

很多同学在理解    Vue    的时候都把    Vue    的数据响应原理理解为双向绑定，但实际上这是不准确的，我们 之前提到的数据响应，都是通过数据的改变去驱动    DOM    视图的变化，⽽双向绑定除了数据驱动    DOM 外，    DOM    的变化反过来影响数据，是⼀个双向关系，在    Vue    中，我们可以通过        v-model        来实现双 向绑定。    v-model        即可以作⽤在普通表单元素上，⼜可以作⽤在组件上，它其实是⼀个语法糖，接下来我们 就来分析        v-model        的实现原理。

![70][]

![70 1][]

![70 2][]

![70 3][]

![70 4][]

![70 5][]

## 组件 ##

##    ![70 6][] ##

![70 7][]

![70 8][]

![70 9][]

![70 10][]

总结  
  
那么⾄此，    v-model        的实现就分析完了，我们了解到它是    Vue    双向绑定的真正实现，但本质上就是 ⼀种语法糖，它即可以⽀持原⽣表单元素，也可以⽀持⾃定义组件。在组件的实现中，我们是可以配 置⼦组件接收的        prop        名称，以及派发的事件名称。

![70 11][]

![70 12][]

![70 13][]

![70 14][]

![70 15][]

![70 16][]

![70 17][]

![70 18][]

![70 19][]

![70 20][]

![70 21][]

![70 22][]

后续流程之前已介绍过，不再赘述，那么⾄此，作⽤域插槽的实现也就分析完毕。

总结

通过这⼀章的分析，我们了解了普通插槽和作⽤域插槽的实现。它们有⼀个很⼤的差别是数据作⽤ 域，普通插槽是在⽗组件编译和渲染阶段⽣成        vnodes    ，所以数据的作⽤域是⽗组件实例，⼦组件渲 染的时候直接拿到这些渲染好的        vnodes    。⽽对于作⽤域插槽，⽗组件在编译和渲染阶段并不会直接 ⽣成        vnodes    ，⽽是在⽗节点        vnode        的        data        中保留⼀个        scopedSlots        对象，存储着不同名称 的插槽以及它们对应的渲染函数，只有在编译和渲染⼦组件阶段才会执⾏这个渲染函数⽣成    vnodes    ，由于是在⼦组件环境执⾏的，所以对应的数据作⽤域是⼦组件实例。 简单地说，两种插槽的⽬的都是让⼦组件        slot        占位符⽣成的内容由⽗组件来决定，但数据的作⽤域 会根据它们        vnodes        渲染时机不同⽽不同。

![70 23][]

![70 24][]

![70 25][]

![70 26][]

![70 27][]

![70 28][]

![70 29][]

![70 30][]

![70 31][]

![70 32][]

![70 33][]

![70 34][]

总结  
  
那么⾄此，    <keep-alive>        的实现原理就介绍完了，通过分析我们知道了        <keep-alive>        组件是⼀ 个抽象组件，它的实现通过⾃定义        render        函数并且利⽤了插槽，并且知道了        <keep-alive>        缓存    vnode    ，了解组件包裹的⼦元素——也就是插槽是如何做更新的。且在        patch        过程中对于已缓存的 组件不会执⾏        mounted    ，所以不会有⼀般的组件的⽣命周期函数但是⼜提供了        activated        和    deactivated        钩⼦函数。另外我们还知道了        <keep-alive>        的        props        除了        include        和    exclude        还有⽂档中没有提到的        max    ，它能控制我们缓存的个数。

![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][]

总结

那么到此为⽌基本的        <transition>        过渡的实现分析完毕了，总结起来，Vue    的过渡实现分为以下⼏ 个步骤： 1.    ⾃动嗅探⽬标元素是否应⽤了    CSS    过渡或动画，如果是，在恰当的时机添加/删除    CSS    类名。 2.    如果过渡组件提供了    JavaScript    钩⼦函数，这些钩⼦函数将在恰当的时机被调⽤。 3.    如果没有找到    JavaScript    钩⼦并且也没有检测到    CSS    过渡/动画，DOM    操作    (插⼊/删除)    在下⼀帧 中⽴即执⾏。 所以真正执⾏动画的是我们写的    CSS    或者是    JavaScript    钩⼦函数，⽽    Vue    的        <transition>        只是帮我 们很好地管理了这些    CSS    的添加/删除，以及钩⼦函数的执⾏时机。

## transition-group  ##

![70 56][]

![70 57][]

![70 58][]

![70 59][]

## render    函数 ##

##    ![70 60][] ##

![70 61][]

![70 62][]

![70 63][]

![70 64][]

[70]: /images/20220514/fbe92dbce1ba4bf0ac106f90481f7f5a.png
[70 1]: /images/20220514/da54c228ec3d459e8b5223fb9e7782f7.png
[70 2]: /images/20220514/ddba6654b4d644a6acc2becb6b4ca06e.png
[70 3]: /images/20220514/750eb69706a147d1a49bc7d0c6c4d855.png
[70 4]: /images/20220514/4b6159fcd0bd46df899b5442109a879a.png
[70 5]: /images/20220514/5fdfbc130d3b4af7a885dcb76f47fb61.png
[70 6]: /images/20220514/807080d3bae542768961b955330ec3ac.png
[70 7]: /images/20220514/269078512d7240c2a3c92fe559f3b103.png
[70 8]: /images/20220514/1b6db56ac33c41d4aa9ac52a7c1d76c8.png
[70 9]: /images/20220514/c9bcbdafc34b40c9849a2ffa631abcd7.png
[70 10]: /images/20220514/d0cfdd00d2f64d3d88891bcd51940256.png
[70 11]: /images/20220514/f2d9fff1d4e14ba8927bd2c40ce3ee8e.png
[70 12]: /images/20220514/8a395e36c67f4abcad25a45b7eed5a6e.png
[70 13]: /images/20220514/787557d17429422ead1022a96bbc5c24.png
[70 14]: /images/20220514/daf7bd5c1fc240b8a99b655b81dabedd.png
[70 15]: /images/20220514/a3427ce197ba421a9f6421d69049b52c.png
[70 16]: /images/20220514/0713f6cb3acd4f6f97f30e6518a361a9.png
[70 17]: /images/20220514/6b8e6efbe5924efea58540bb01eee659.png
[70 18]: /images/20220514/11582b9200d84f78a8448c8dc8cb72e5.png
[70 19]: /images/20220514/9f41abc1184140bdb6d2d1826f078599.png
[70 20]: /images/20220514/306bc7789aae4a97b711e32c9ccb91f1.png
[70 21]: /images/20220514/dcce623a54484b719a1e478335d6b418.png
[70 22]: /images/20220514/0dfa0b49b39c4e3085622d0f11d546c7.png
[70 23]: /images/20220514/cb1270851722489ab8154c683ab167d3.png
[70 24]: /images/20220514/210252863564412d908c0b67f4f184ac.png
[70 25]: /images/20220514/9be331c4f91e41c4927befe8e4e9178c.png
[70 26]: /images/20220514/1937db57af294b9a8abc5bf812a7ff90.png
[70 27]: /images/20220514/c4015627dcd64e9bbc887ec1b7b4c800.png
[70 28]: /images/20220514/b5789a18c8b14444aa36f5c155cf8aa6.png
[70 29]: /images/20220514/01939416e4d34ff49938157a8fd85e0b.png
[70 30]: /images/20220514/2defc5ebd43545dd859669a08b424686.png
[70 31]: /images/20220514/d4780e783f9c455e9694f53660067e4d.png
[70 32]: /images/20220514/4b8257f423854105804fb80b6503a676.png
[70 33]: /images/20220514/fa5c88f636d9443385928a7b8036a13d.png
[70 34]: /images/20220514/2a30bca6b552492b9bd856ef49116d04.png
[70 35]: /images/20220514/e2215d3f33b942f98a88288735ea8839.png
[70 36]: /images/20220514/db3d9ecd93bf409e8666e8eefc3da9f5.png
[70 37]: /images/20220514/99e2a418364f4e638b699f74efd42719.png
[70 38]: /images/20220514/60edfc269321450bb5fe86641c9e5cfa.png
[70 39]: /images/20220514/12b7153ea4444c098d503d958d4abd13.png
[70 40]: /images/20220514/7432458d160b416093a360f0e05a2a80.png
[70 41]: /images/20220514/7153ff9392154e2eaa89e1a1aa84ab19.png
[70 42]: /images/20220514/2a57759d35734afdb0b8dd0ce94d14de.png
[70 43]: /images/20220514/073a95f797774c2fa00ac74ea2730831.png
[70 44]: /images/20220514/1523f24778bf420d99cc728ac326ab4e.png
[70 45]: /images/20220514/63953503392c4ec091d9b9864ce83ff6.png
[70 46]: /images/20220514/e42b3be3f6ea485d9a9f844a8bcc51eb.png
[70 47]: /images/20220514/ec26d00e400e4b1b938653161bf69049.png
[70 48]: /images/20220514/83369f3e88ea4ea89f402887854f0c6c.png
[70 49]: /images/20220514/840d0732e3bb43088d70a3cc96734f04.png
[70 50]: /images/20220514/350e3b627baf4c39bdc1eb74ae3f01d6.png
[70 51]: /images/20220514/5c02b818cf4d4adbb4db6b1fab17987b.png
[70 52]: /images/20220514/fe5d35dc9cdc42c6a2020baac9b9ec18.png
[70 53]: /images/20220514/b262f53da41748c5bd8b07640cb14787.png
[70 54]: /images/20220514/661bec78a9cb4a25803f286ef29341a0.png
[70 55]: /images/20220514/10828b4dafe0415a8564b0d5251afd9f.png
[70 56]: /images/20220514/698d420db8a14edb99fda5a7a7399b63.png
[70 57]: /images/20220514/b47a89b745e7444381c53f9dd3094bc2.png
[70 58]: /images/20220514/8ccb24ae78054e06a49a0f29a49833b4.png
[70 59]: /images/20220514/2d1b85f5509e405eaab6502dcc804186.png
[70 60]: /images/20220514/58ff91a54b79451980b1b5f368fc9851.png
[70 61]: /images/20220514/db6159482b134d69a9bac8a884a06e24.png
[70 62]: /images/20220514/3e5839a0a3fa419c96facb43e4e565ec.png
[70 63]: /images/20220514/1c1acce2405a42f08c96bbe0318dde0e.png
[70 64]: /images/20220514/3fc1d4ce3f2f47318c6e0be9b8c18d41.png