经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Vue.js 源码分析(二十九) 高级应用 transition-group组件 详解
来源:cnblogs  作者:大沙漠  时间:2019/8/2 8:48:23  对本文有异议

对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件。

transition-group组件的props和transition组件类似,不同点是transition-group组件的props是没有mode属性的,另外多了以下两个props
    tag                  标签名
    moveClass      新增/移除元素时的过渡    ;如果未指定则默认会拼凑出name+"-move"这个格式的,一般很少用到,比较复杂的动画可以该接口实现

不同于transition组件,transition-group组件它会以一个真实元素呈现,默认为一个<span>,我们也可以通过tag特性更换为其他元素,每个总都需要提供唯一的key属性值。以Vue官网的某例子为例,如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="vue.js"></script>
  7. </head>
  8. <body>
  9. <style>
  10. .list-item{display: inline-block;margin-right: 10px;}
  11. .list-enter-active,.list-leave-active{transition: all 1s;}
  12. .list-enter,.list-leave-to{opacity: 0;transform: translateY(30px);}
  13. </style>
  14. <div id="d">
  15. <button v-on:click='add'>add</button><button v-on:click='remove'>remove</button>
  16. <transition-group tag="p" name="list" >
  17. <span v-for="no in Nums" :key="no" class="list-item">{{no}}</span>
  18. </transition-group>
  19. </div>
  20. <script>
            Vue.config.productionTip=false;
            Vue.config.devtools=false;
  21. var app = new Vue({
  22. el:'#d',
  23. methods:{
  24. randomIndex:function(){return Math.floor(Math.random()*this.Nums.length)},
  25. add:function(){this.Nums.splice(this.randomIndex(),0,this.nextVal++)},
  26. remove:function(){this.Nums.splice(this.randomIndex(),1)}
  27. },
  28. data:{Nums:[1,2,3,4,5,6,7,8,9],nextVal:10}
  29. })
  30. </script>
  31. </body>
  32. </html>

渲染的DOM树如下:

我们可以看到transition-group渲染为了一个p元素,这是因为我们通过tag特性指定为了p,显示如下:

当我们点击add或remove时就会新增/删除一个数字,并会触发动画

动画更新时Vue通过key来作为该元素的唯一标识,保存到内部的一个map变量里,如果没有key是要报错的,:例如我们把模板里的:key="no"去掉,改成<span v-for="no in Nums"  class="list-item">{{no}}</span>,控制台会报错的,如下:

 

源码分析


从源码角度来看,对于transition-group来说,它只是新增了一个管理子节点的功能,最终的动画还是和transition组件一样,来通过设置每个子节点的data.transition属性为对应的动画对象来实现的,transition-group组件的结构如下:

  1. var props = extend({ //第8343行 transition-group组件的props定义
  2. tag: String,
  3. moveClass: String
  4. }, transitionProps);
  5. delete props.mode;
  6. var TransitionGroup = { //transition-group组件的定义
  7. props: props,
  8. render: function render (h) { //render函数
  9. /**/
  10. },
  11. beforeUpdate: function beforeUpdate () { //beforeUpdate钩子
  12. /**/
  13. },
  14. updated: function updated () { //updated钩子
  15. /**/
  16. },
  17. methods: {
  18. hasMove: function hasMove (el, moveClass) {
  19. /**/
  20. }
  21. }
  22. }

transition-group初始化时只会执行组件里的render函数,更新操作时会执行beforeUpdate和updated钩子函数,hasMove是一个在updated里要用到的方法

初始化时会执行render函数,如下:

  1. render: function render (h) { //transition的render函数,它也没有template模板
  2. var tag = this.tag || this.$vnode.data.tag || 'span'; //标签名,默认为span
  3. var map = Object.create(null);
  4. var prevChildren = this.prevChildren = this.children;
  5. var rawChildren = this.$slots.default || []; //获取调用transition-group时的所有子节点Vnode
  6. var children = this.children = []; //组件实例上新增一个children属性
  7. var transitionData = extractTransitionData(this); //调用extractTransitionData()函数提取在transition组件上定义的data,和transition组件是一样的
  8.  
  9. for (var i = 0; i < rawChildren.length; i++) { //遍历所有子节点
  10. var c = rawChildren[i];
  11. if (c.tag) {
  12. if (c.key != null && String(c.key).indexOf('__vlist') !== 0) { //如果c存在key
  13. children.push(c); //保存到children数组里
  14. map[c.key] = c //保存到map对象里,key作为键名
  15. ;(c.data || (c.data = {})).transition = transitionData; //给所有子节点VNode.data.transition上增加transitionData
  16. } else { //如果子节点c不存在key,则报错,也就是上面说的去掉模板里key后的报错
  17. var opts = c.componentOptions;
  18. var name = opts ? (opts.Ctor.options.name || opts.tag || '') : c.tag;
  19. warn(("<transition-group> children must be keyed: <" + name + ">"));
  20. }
  21. }
  22. }
  23. if (prevChildren) { //更新时的分支
  24. var kept = [];
  25. var removed = [];
  26. for (var i$1 = 0; i$1 < prevChildren.length; i$1++) {
  27. var c$1 = prevChildren[i$1];
  28. c$1.data.transition = transitionData;
  29. c$1.data.pos = c$1.elm.getBoundingClientRect();
  30. if (map[c$1.key]) {
  31. kept.push(c$1);
  32. } else {
  33. removed.push(c$1);
  34. }
  35. }
  36. this.kept = h(tag, null, kept);
  37. this.removed = removed;
  38. }
  39. return h(tag, null, children) //执行h函数,也就是_c函数去创建tag这个VNode
  40. },

初始化就这样子结束了,map里保存了所有的子节点,key作为键名,值为对应的VNode:

这样每个子节点VNode都含有transition属性了,如果设置了初次渲染则页面初始化时就会自动执行动画了,如果新增/移除了元素,动画怎么实现的呢,这个就要靠beforeUpdate钩子来实现了。

当页面更新,例如我们点击了remove按钮会删除一个元素并触发更新,此时会重新执行render函数,与初始化有点不同,如下:

  1. render: function render (h) { //transition的render函数,它也没有template模板
  2. var tag = this.tag || this.$vnode.data.tag || 'span';
  3. var map = Object.create(null);
  4. var prevChildren = this.prevChildren = this.children; //获取之前的children信息
  5. var rawChildren = this.$slots.default || []; //获取当前的所有子节点Vnode
  6. var children = this.children = [];
  7. var transitionData = extractTransitionData(this);
  8. for (var i = 0; i < rawChildren.length; i++) {
  9. var c = rawChildren[i];
  10. if (c.tag) {
  11. if (c.key != null && String(c.key).indexOf('__vlist') !== 0) {
  12. children.push(c);
  13. map[c.key] = c
  14. ;(c.data || (c.data = {})).transition = transitionData;
  15. } else {
  16. var opts = c.componentOptions;
  17. var name = opts ? (opts.Ctor.options.name || opts.tag || '') : c.tag;
  18. warn(("<transition-group> children must be keyed: <" + name + ">"));
  19. }
  20. }
  21. }
  22. if (prevChildren) { //如果prevChildren存在
  23. var kept = [];
  24. var removed = [];
  25. for (var i$1 = 0; i$1 < prevChildren.length; i$1++) { //遍历prevChildren
  26. var c$1 = prevChildren[i$1]; //这是每个之前的children
  27. c$1.data.transition = transitionData;
  28. c$1.data.pos = c$1.elm.getBoundingClientRect(); //获取它的位置属性,比如:{bottom: 68,height: 21,left: 8,right: 17.390625,top: 47,width: 9.390625,x: 8,y: 47}
  29. if (map[c$1.key]) { //如果map中存在C$1
  30. kept.push(c$1); //则保存到kept里(本次渲染时保留的)
  31. } else { //如果map中不存在C$1
  32. removed.push(c$1); //则保存到removed里(需要移除的)
  33. }
  34. }
  35. this.kept = h(tag, null, kept); //调用h创建一个VNode,保存到this.keps里
  36. this.removed = removed; //需要删除的VNode集合
  37. }
  38. return h(tag, null, children)
  39. },

this.kept中保存了当前保留的所有子节点,而this.remove则保存了需要移除的子节点,例子里执行到这里this.kept如下:

this.remove如下:

最后还是调用h返回以最新的children作为子节点的VNode,返回到组件的主线,触发_update函数时如下:

  1. Vue.prototype._update = function (vnode, hydrating) { //第2645行
  2. var vm = this;
  3. if (vm._isMounted) { //如果已经挂载了
  4. callHook(vm, 'beforeUpdate'); //则执行beforeUpdate生命周期函数
  5. }
  6. var prevEl = vm.$el;
  7. var prevVnode = vm._vnode; //先将vm._vnode保存到prevVnode里
  8. var prevActiveInstance = activeInstance;
  9. activeInstance = vm;
  10. vm._vnode = vnode;
  11. // Vue.prototype.__patch__ is injected in entry points
  12. // based on the rendering backend used.
  13. if (!prevVnode) {
  14. // initial render
  15. vm.$el = vm.__patch__(
  16. vm.$el, vnode, hydrating, false /* removeOnly */,
  17. vm.$options._parentElm,
  18. vm.$options._refElm
  19. );
  20. // no need for the ref nodes after initial patch
  21. // this prevents keeping a detached DOM tree in memory (#5851)
  22. vm.$options._parentElm = vm.$options._refElm = null;
  23. } else { //如果prevVnode不为空,即更新操作时
  24. // updates
  25. vm.$el = vm.__patch__(prevVnode, vnode); //调用vm.__patch__进行更新操作
  26. }
  27. /**/

因为当前运行是transition-group组件的过程,所以beforeUpdate就会执行,如下:

  1. beforeUpdate: function beforeUpdate () { //transition-group组件的beforeUpdate钩子函数
  2. // force removing pass
  3. this.__patch__(
  4. this._vnode,
  5. this.kept,
  6. false, // hydrating
  7. true // removeOnly (!important, avoids unnecessary moves)
  8. ); //先执行一遍_patch__,这将删除所有要删除的节点,并触发它们的离开转换过渡,参数4设置为false,避免不必要的移动
  9. this._vnode = this.kept; //再将this.kept赋值给_vnode
  10. },

this.__patch__会执行patchVnode,最后会执行updateChildren对每个子节点做出更新,除了kept之外的子节点VNode都会删除掉。beforeUpdate最后会把this.kept保存到this._vnode。

最后回到transition-group组件的_update里,该函数会把vm._vnode保存到prevVnode局部变量,最后判断如果prevVnode存在则执行__patch__做更新操作,由于每个子节点Vnode.data.transition都保存着动画信息,所以都会自动执行动画。

updated钩子函数官网说是为了改变定位用的,是个新特性,捣鼓了一会儿没找到合适的场景,以后用到了再来深入研究一下

原文链接:http://www.cnblogs.com/greatdesert/p/11275508.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号