Vue 3.x 废弃的用法

filters

Vue3.0 将不再支持filters语法。

<!-- before -->
{{ msg | format }}

<!-- after -->
{{ format(msg) }}

原因

• Filters的功能可以通过方法调用或计算属性轻松复制，因此它主要提供的是语法价值，而不是实际价值。
• Filters需要一个自定义的小语法，然而这打破表达式只是JavaScript的假设——这增加了学习和实现的成本。事实上，它与JavaScript自己的位或运算符(|)相冲突，并使表达式解析更加复杂。
• Filters还会在模板IDE支持中增加额外的复杂性(同样因为它们不是真正的JavaScript)。

event api

移除$on,$off和$once这三个实例方法。Vue3.0不再实现这三个事件发射器。

inline-template

transition

当组件从外部被切换显示状态时，使用<transition>作为根组件的组件将不再触发转换。
在Vue 3.0中，这个组件应该暴露一个布尔值出来，用以控制<transition>里面的内容的显示与隐藏。

Before:

<!-- modal component -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>

<!-- usage -->
<modal v-if="showModal">hello</modal>

After: expose a prop to control the toggle

<!-- modal component -->
<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>

<!-- usage -->
<modal :show="showModal">hello</modal>

原因

<transition>组件的工作方式是对其内部内容的切换做出反应，而不是对自身的切换:

transition-class

• 重命名 v-enter transition 类名为 v-enter-from
• 重命名 v-leave transition 类名为 v-leave-from
• 重命名 v-appear transition 类名为 v-appear-from

/* before */
.v-enter, .v-leave-to{
  opacity: 0;
}

/* after */
.v-enter-from, .v-leave-to{
  opacity: 0;
}

data-object-declaration