Vue3.0 中廢棄和修改的用法

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

在Vue2.x中，data選項支持object和function兩種類型的定義.
但是在3.0中，將會廢棄object這種定義方法。