{"id":124967,"date":"2020-06-15T00:44:07","date_gmt":"2020-06-14T16:44:07","guid":{"rendered":"http:\/\/4563.org\/?p=124967"},"modified":"2020-06-15T00:44:07","modified_gmt":"2020-06-14T16:44:07","slug":"%e5%85%b3%e4%ba%8e-vue-%e7%9a%84-transiton-%e7%bb%84%e4%bb%b6%e5%92%8c-render-%e4%bb%a5%e5%8f%8a-es6-%e7%9a%84-class-%e8%af%ad%e6%b3%95%e7%9a%84%e9%97%ae%e9%a2%98","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=124967","title":{"rendered":"\u5173\u4e8e vue \u7684 transiton \u7ec4\u4ef6\u548c render \u4ee5\u53ca es6 \u7684 class \u8bed\u6cd5\u7684\u95ee\u9898"},"content":{"rendered":"<div>\n<div>\n<div>\n<h1>                  \u5173\u4e8e vue \u7684 transiton \u7ec4\u4ef6\u548c render \u4ee5\u53ca es6 \u7684 class \u8bed\u6cd5\u7684\u95ee\u9898               <\/h1>\n<p> <\/p>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : qaqLjj <\/span>  <span><i><\/i> 21<\/span> <\/div>\n<div> <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div isfirst=\"1\"> <\/p>\n<p>\u8981\u57fa\u4e8e vue \u5b9e\u73b0\u4e00\u4e2a collapse \u7684\u8fc7\u6e21\u52a8\u753b<br \/> \u5f53\u6211\u4f7f\u7528 class \u8bed\u6cd5\u5199\u7684\u65f6\u5019\uff0c\u52a8\u753b\u7684\u94a9\u5b50\u51fd\u6570\u5b8c\u5168\u6ca1\u6709\u6267\u884c<br \/> \u4f46\u5f53\u6211\u4f7f\u7528 prototype \u7684\u5f62\u5f0f\u7684\u65f6\u5019\u5374\u6ca1\u6709\u8fd9\u4e2a\u95ee\u9898<br \/> \u8bf7\u9ad8\u624b\u6307\u6559\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<br \/> <em>\u6ce8\uff1aclass \u5f62\u5f0f\u7684\u6784\u9020\u51fd\u6570\u4e3a Transition1\uff0cprototype \u5f62\u5f0f\u7684\u6784\u9020\u51fd\u6570\u4e3a Transition2<\/em><\/p>\n<pre><code>class Transition1\u00a0{   beforeEnter(el)\u00a0{ \u00a0\u00a0}     enter(el)\u00a0{ \u00a0\u00a0}   afterEnter(el)\u00a0{ \u00a0\u00a0}   beforeLeave(el)\u00a0{ \u00a0\u00a0}   leave(el)\u00a0{ \u00a0\u00a0}   afterLeave(el)\u00a0{ \u00a0\u00a0} }  function Transition2()\u00a0{} Transition2.prototype.beforeEnter\u00a0=\u00a0function beforeEnter(el)\u00a0{} Transition2.prototype.enter\u00a0=\u00a0function enter(el)\u00a0{} Transition2.prototype.afterEnter\u00a0=\u00a0function afterEnter(el)\u00a0{} Transition2.prototype.beforeLeave\u00a0=\u00a0function beforeLeave(el)\u00a0{} Transition2.prototype.leave\u00a0=\u00a0function leave(el)\u00a0{} Transition2.prototype.afterLeave\u00a0=\u00a0function afterLeave(el)\u00a0{}  export default\u00a0{   functional:\u00a0true,   render(h,\u00a0{\u00a0children\u00a0})\u00a0{     const data\u00a0=\u00a0{       on:\u00a0new Transition1() \u00a0\u00a0\u00a0\u00a0}     return h('transition',\u00a0data,\u00a0children)   } } <\/code><\/pre>\n<p>\u4e3a\u4e86\u65b9\u4fbf\u9605\u8bfb\uff0c\u8fd9\u4e9b\u94a9\u5b50\u51fd\u6570\u7684\u5177\u4f53\u5185\u5bb9\u6211\u7701\u7565\u6389\u4e86<br \/> \u5b9e\u5728\u4ee4\u4eba\u7591\u60d1\uff0cclass \u5e94\u8be5\u53ea\u662f\u4e2a\u8bed\u6cd5\u7cd6\u554a\uff0c\u4e3a\u4ec0\u4e48\u4f1a\u6709\u4e0d\u4e00\u6837\u7684\u8868\u73b0<\/p>\n<\/p><\/div>\n<div> <b>\u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (<span>5<\/span>)        <\/div>\n<div> <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<ul>\n<li data-pid=\"2071326\" data-uid=\"2\">\n<div>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : noe132 <\/span>  <\/div>\n<div> <i title=\"\u5f15\u7528\"><\/i>  <span>          <\/span> <\/div>\n<\/p><\/div>\n<div>                                                             \u56e0\u4e3a\u4f60\u7684 prototype \u6ca1\u6709\u6b63\u786e\u7684\u6a21\u62df class \u7684\u884c\u4e3a\u3002<\/p>\n<p>&gt; Reflect.getOwnPropertyDescriptor(Transition1.prototype, &#8216;beforeEnter&#8217;).enumerable<br \/>&lt; false<br \/>&gt; Reflect.getOwnPropertyDescriptor(Transition2.prototype, &#8216;beforeEnter&#8217;).enumerable<br \/>&lt; true<\/p>\n<p>\u800c vue \u5728\u521d\u59cb\u5316 transition \u7684\u9009\u9879\u65f6\u7528\u5230\u4e86 extend \u51fd\u6570\uff0c\u91cc\u9762\u4f7f\u7528 for&#8230;in \u904d\u5386\u5c5e\u6027\u3002for&#8230;in \u904d\u5386\u7684\u65f6 enumrable non symbol property.<\/p>\n<p>https:\/\/github.com\/vuejs\/vue\/blob\/4de4649d9637262a9b007720b59f80ac72a5620c\/src\/shared\/util.js#L231<\/p>\n<p>\u800c\u4e14\u901a\u5e38\u8fd9\u79cd\u4e1c\u897f\u4e0d\u4f1a\u7528 class \u6765\u5b9e\u73b0\u3002\u666e\u901a\u5bf9\u8c61\u4e0d\u5c31\u591f\u4e86\u4e48\uff1f                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n<li data-pid=\"2071327\" data-uid=\"2\">\n<div>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : noe132 <\/span>  <\/div>\n<div> <i title=\"\u5f15\u7528\"><\/i>  <span>          <\/span> <\/div>\n<\/p><\/div>\n<div>                                                             \u628a class \u653e\u5230 babel compile \u4e00\u4e0b https:\/\/babeljs.io\/repl<br \/>\u4f60\u5c31\u77e5\u9053\u533a\u522b\u4e86                                                            <\/div>\n<\/p><\/div>\n<\/li>\n<li data-pid=\"2071328\" data-uid=\"2\">\n<div>\n<div>\n<div> <span>\u4e3b<\/span> <span>\u8cc7\u6df1\u5927\u4f6c : qaqLjj <\/span>  <\/div>\n<div> <i title=\"\u5f15\u7528\"><\/i>  <span>          <\/span> <\/div>\n<\/p><\/div>\n<div>                                                             @noe132 \u975e\u5e38\u611f\u8c22\u4f60\u7684\u56de\u7b54\uff0c\u7ec8\u4e8e\u77e5\u9053\u95ee\u9898\u51fa\u5728\u54ea\u91cc\u4e86\u3002 <br \/>\u9664\u4e86\u8fd9\u4e2a\u95ee\u9898\u6211\u8fd8\u6709\u4e24\u4e2a\u95ee\u9898\u80fd\u5426\u6307\u6559\u4e00\u4e0b \uff0c\u6211\u6587\u4e2d\u8d34\u7684\u4ee3\u7801\u7ed3\u6784\u57fa\u672c\u548c element-ui \u7684 el-collapse-transition \u7ec4\u4ef6\u76f8\u540c <br \/>1.\u5982\u4f60\u6240\u8bf4\uff0c\u8fd9\u91cc element-ui \u6e90\u7801\u4e2d\u4e3a\u4ec0\u4e48\u4e0d\u76f4\u63a5 const \u58f0\u660e\u4e00\u4e2a\u53d8\u91cf\u3002 <br \/>2.\u4e3a\u4ec0\u4e48 element-ui \u6e90\u7801\u4e2d\u53ef\u4ee5\u4f7f\u7528 class \u8bed\u6cd5\uff0c\u6e90\u7801\u7528\u4e86\u4ec0\u4e48\u5e93\u8f6c\u8bd1\u4e86 class \u5e76\u4e14\u4e0d\u5f71\u54cd\u4f7f\u7528 <br \/>https:\/\/github.com\/ElemeFE\/element\/blob\/dev\/src\/transitions\/collapse-transition.js                                                            <\/div>\n<\/p><\/div>\n<\/li>\n<li data-pid=\"2071329\" data-uid=\"2\">\n<div>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : noe132 <\/span>  <\/div>\n<div> <i title=\"\u5f15\u7528\"><\/i>  <span>          <\/span> <\/div>\n<\/p><\/div>\n<div>                                                             element-ui \u5f88\u53ef\u80fd\u7528\u4e86\u8001\u7248\u672c\u7684 babel<br \/>https:\/\/unpkg.com\/<span data-cfemail=\"12777e777f777c663f677b52203c23213c20\">[email&#160;protected]<\/span>\/lib\/transitions\/collapse-transition.js<br \/>\u7f16\u8bd1\u51fa\u6765\u7684\u4ee3\u7801\u662f\u4e0d\u7b26\u5408 class \u6b63\u786e\u8bed\u4e49\u7684                                                            <\/div>\n<\/p><\/div>\n<\/li>\n<li data-pid=\"2071330\" data-uid=\"2\">\n<div>\n<div>\n<div> <span>\u4e3b<\/span> <span>\u8cc7\u6df1\u5927\u4f6c : qaqLjj <\/span>  <\/div>\n<div> <i title=\"\u5f15\u7528\"><\/i>  <span>          <\/span> <\/div>\n<\/p><\/div>\n<div>                                                             @noe132 \u662f\u7684\uff0c\u5bf9\u8c61\u539f\u578b\u4e0a\u7684\u65b9\u6cd5\u53ef\u4ee5\u679a\u4e3e\u662f\u4e0d\u7b26\u5408 es6 \u89c4\u8303\u7684\uff0c\u518d\u6b21\u611f\u8c22\u4f60\u7684\u5e2e\u52a9 <br \/>https:\/\/w3ctech.com\/topic\/1708                                                            <\/div>\n<\/p><\/div>\n<\/li>\n<li>\n","protected":false},"excerpt":{"rendered":"<p>\u5173\u4e8e vue \u7684 transito&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/124967"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=124967"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/124967\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=124967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=124967"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=124967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}