关于 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)