• 开始时间：2019-11-29
  • 目标主要版本：3.x
  • 引用 issue：N/A
  • 实现的 PR：N/A

摘要

使用 <transiton> 作为组件的根，当组件从外部被切换时，将不再触发过渡。

基本范例

之前：

  1. <!-- modal component -->
  2. <template>
  3.   <transition>
  4.     <div class="modal"><slot/></div>
  5.   </transition>
  6. </template>
  8. <!-- usage -->
  9. <modal v-if="showModal">hello</modal>

之后：暴露出来一个属性来控制开关

  1. <!-- modal component -->
  2. <template>
  3.   <transition>
  4.     <div v-if="show" class="modal"><slot/></div>
  5.   </transition>
  6. </template>
  8. <!-- usage -->
  9. <modal :show="showModal">hello</modal>

动机

目前的 2.x 行为意外的工作，但有一些怪癖。我们没有禁用这种用法，而是增加了更多的修补，使其发挥作用，因为一些用户依赖这种行为。然而，从语法上讲，这种用法是没有意义的：根据定义，<transition> 组件的工作原理是对其内部内容的切换做出反应，而不是对其本身的切换做出反应：

  1. <!-- this does not work -->
  2. <transition v-if="show">
  3.   <div></div>
  4. </transition>
  6. <!-- this is expected usage -->
  7. <transition>
  8.   <div v-if="show"></div>
  9. </transition>

在支持 2.x 行为时，在确定过渡期的的 appear 状态时，它也造成了一些复杂的问题。

具体设计

在 3.0 中，切换一个以 为根节点的组件将不再触发过渡。相反，该组件应该暴露一个属性来控制 里面的内容是否存在。

缺点

在兼容版本（compat build）中，旧的行为不能与新的行为同时支持。

备选方案

N/A

采纳策略

对于旧行为的依赖可以通过静态分析发现，检测根 组件，其内部内容没有 v-if 或者 v-show 指令。然后，迁移工具可以指导用户对这些情况进行升级。

没有解决的问题

N/A