[Feature Request] 加入 beforeDetach 生命周期，并允许生命周期钩子中手动控制生命周期向下执行。 about san HOT 14 CLOSED

以下内容有狡辩嫌疑，但我们确实思考过。

我们也发现，淡入的动画可以很方便的通过css来做，但是淡出做不到，因为元素已经销毁了。

我们可以很容易支持类似楼主所提的异步api，但是这样依然存在问题。假设我们使用css来做淡出动画，js中一样需要估算css动画的完成时间，从而在动画完成后真正销毁组件。这样做会导致维护成本增加（一个动画要在js和css中都维护）。如果使用纯js来控制动画，又会不利于GPU加速，也不科学。

所以，我们觉得不应该提供这样的api，不应该鼓励这么做（通过js api的点来做淡出动画）。那么这种场景怎么办呢？

1. 我们观察到，很多转场，在出入的过程中，入的元素有动画效果，出的元素瞬间就没了。通常入的元素为了平滑和尽快让用户可交互，时间会很短，此时不易观察到出的元素瞬间消失，效果并没有打很大的折扣。
2. 如果非要做，转场应该是有控制器的（比如一个自己实现的router）。控制器本身会负责组件的选取、初始化、入场和出场，在控制器里做这个事情是比较合适的。

综上，我们觉得组件框架不应该提供异步的detach的feature。

from san.

是的，因为 san 的挂在和卸载是可以手动控制的（虽然文档里没提到相关 API），所以我昨天也有想过这个思路。但想来想去都无法回避两个难题：

1. 和 san-if 指令冲突，封装一个组件无法避免用户使用这个核心指令。
2. 如果一个需要 transition 的组件应用非常广泛，那么路由（或者其它控制器）需要细化的程度非常高，甚至每个 tab 每个表单都要做一个路由匹配，使源码可读性降低，不便于维护。

其实我明白让生命周期变成异步是一个 breaking change，目前是不太现实的。只是目前也没找到过度动画在 san 中的最佳实践，因此我再斗胆提出一个设想：提供 API 允许用户创建一个 san component like object，这个 object 包含一个真实的 san component ，本身没有上下文，会被父组件触发生命周期钩子，而这个钩子（全部或部分）是由用户自己实现的，开发者在合适的时机手动去调用实例的 attach、detach 等方法。

最后希望 san 能早日找到此类需求的最佳实践。

from san.

虽然Web Animation API已经可用了所以CSS动画这一说法并不成立，但我也不建议在hook上留任何分支的余地，让人重写detach及_dispose方法来实现更好

from san.

根据 @otakustay 的思路进行一个简陋的实现，可以观察到一些问题。如果点击频率够高，第一个实例还没有被销毁第二个实例就已经挂载，页面上将同时出现两个组件实例。

Demo
SourceCode

from san.

如果点击频率够高，第一个实例还没有被销毁第二个实例就已经挂载，页面上将同时出现两个组件实例。

因为没有override掉data相关的函数，把所有的数据更新都做特殊处理（比如有更新的时候结束掉上一次的动画之类的）的关系

当然我承认san现在要做这个有点能，参考下vue1的玩法 https://github.com/vuejs/vue/blob/1.1/src/transition/transition.js

from san.

我倒是觉得 vue2 的思路和我的比较像，通过判断是不是同一个 VNode ，然后在公用的 VNode 上立 flag ，在下一个生命周期中去判断是否需要去创建节点。但是 ANode 是互相独立的，并没有提供这个能力 🤣 。

from san.

有vnode的情况下所有的事都很好办，但是san显然并不是vnode based的，anode不是vnode，所以我给你看的是vue1的代码

from san.

实践证明 vue1 的 transition 也会出现两个节点的问题……看来如果不做些底层的改动这里的确是很难搞了。

from san.

san理论可以搞，就是hook掉data的所有更新方法，把更新都进队列，在进队列以后就不会出现2个节点这种事了，你狂点一阵就等着2分钟完成所有的操作吧

如果不想这样，就通过anode判断这个更新影响到哪些元素进行精细控制，但我感觉给我半年都写不出正确的控制来，要考虑的不仅仅是if啊for啊这些，边界还是蛮多的

另外这些方法都有个毛病就是DOM和data肯定要不同步了，不过这个应该关系不大

from san.

从性能和维护成本方面考虑，这两个方案可行性貌似都差点意思。姑且屈服于 vue1 的淫威吧…… 😞

from san.

大周末的我又来烦你们了 😅

这两天参考了一下其他框架的实现，发现 vue 2 和我在上文提到的思路有一定的重合。vue 2 在创建组件的方法中提供了一个私有的 option 叫做 abstract，由它创建出的 抽象组件 本身不绑定 DOM Element ，而是代理它的第一个子节点。如果以这个思路来做，那么双节点的问题就迎刃而解了：只要这个抽象组件去检测它的子节点数量就可以去完成动画进出的精确流程控制。正如前面所说的，我们可能真正需要的是这样或者类似这样的一个能力：

提供 API 允许用户创建一个 san component like object，这个 object 包含一个真实的 san component ，本身没有上下文，会被父组件触发生命周期钩子，而这个钩子（全部或部分）是由用户自己实现的，开发者在合适的时机手动去调用实例的 attach、detach 等方法。

不过， vue 2 并没有把这个抽象组件的概念暴露给开发者，目前还没搞明白原因。

from san.

你所谓的abstract的功能和这个类似么：#3

from san.

类似，但是我觉得我的思路更像是把 abstract compnent 当做一个 vnode 来用。。

from san.

结论：自己重写生命周期即可。对这个 feature 的讨论跑题了，我先关掉，遇到相关问题再开新 issue。

from san.