跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 关于 vue 的 transiton 组件和 render 以及 es6 的 class 语法的问题
未分類
15 6 月 2020

关于 vue 的 transiton 组件和 render 以及 es6 的 class 语法的问题

关于 vue 的 transiton 组件和 render 以及 es6 的 class 语法的问题

資深大佬 : qaqLjj 21

要基于 vue 实现一个 collapse 的过渡动画
当我使用 class 语法写的时候,动画的钩子函数完全没有执行
但当我使用 prototype 的形式的时候却没有这个问题
请高手指教,代码如下:
注:class 形式的构造函数为 Transition1,prototype 形式的构造函数为 Transition2

class Transition1 {   beforeEnter(el) {   }     enter(el) {   }   afterEnter(el) {   }   beforeLeave(el) {   }   leave(el) {   }   afterLeave(el) {   } }  function Transition2() {} Transition2.prototype.beforeEnter = function beforeEnter(el) {} Transition2.prototype.enter = function enter(el) {} Transition2.prototype.afterEnter = function afterEnter(el) {} Transition2.prototype.beforeLeave = function beforeLeave(el) {} Transition2.prototype.leave = function leave(el) {} Transition2.prototype.afterLeave = function afterLeave(el) {}  export default {   functional: true,   render(h, { children }) {     const data = {       on: new Transition1()     }     return h('transition', data, children)   } } 

为了方便阅读,这些钩子函数的具体内容我省略掉了
实在令人疑惑,class 应该只是个语法糖啊,为什么会有不一样的表现

大佬有話說 (5)

  • 資深大佬 : noe132

    因为你的 prototype 没有正确的模拟 class 的行为。

    > Reflect.getOwnPropertyDescriptor(Transition1.prototype, ‘beforeEnter’).enumerable
    < false
    > Reflect.getOwnPropertyDescriptor(Transition2.prototype, ‘beforeEnter’).enumerable
    < true

    而 vue 在初始化 transition 的选项时用到了 extend 函数,里面使用 for…in 遍历属性。for…in 遍历的时 enumrable non symbol property.

    https://github.com/vuejs/vue/blob/4de4649d9637262a9b007720b59f80ac72a5620c/src/shared/util.js#L231

    而且通常这种东西不会用 class 来实现。普通对象不就够了么?

  • 資深大佬 : noe132

    把 class 放到 babel compile 一下 https://babeljs.io/repl
    你就知道区别了

  • 主 資深大佬 : qaqLjj

    @noe132 非常感谢你的回答,终于知道问题出在哪里了。
    除了这个问题我还有两个问题能否指教一下 ,我文中贴的代码结构基本和 element-ui 的 el-collapse-transition 组件相同
    1.如你所说,这里 element-ui 源码中为什么不直接 const 声明一个变量。
    2.为什么 element-ui 源码中可以使用 class 语法,源码用了什么库转译了 class 并且不影响使用
    https://github.com/ElemeFE/element/blob/dev/src/transitions/collapse-transition.js

  • 資深大佬 : noe132

    element-ui 很可能用了老版本的 babel
    https://unpkg.com/[email protected]/lib/transitions/collapse-transition.js
    编译出来的代码是不符合 class 正确语义的

  • 主 資深大佬 : qaqLjj

    @noe132 是的,对象原型上的方法可以枚举是不符合 es6 规范的,再次感谢你的帮助
    https://w3ctech.com/topic/1708

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具