vue3被刪除的兩個功能

vue3 除了增加很多的功能之後，其實我們也需要關注 vue2 中有哪些功能被刪除了，今天就討論之前被刪除的一些功能。

vue3 不支持 eventBus 了，因爲原先實例上的三個方法 off 和 $once 被刪除掉了。

那麼之前的做法是在一個文件中創建了實例然後導出給任何地方的組件全局使用。

// eventHub.js

const eventHub = new Vue()
export default eventHub

以創建在整個項目中使用的全局事件監聽器，然後通過 emit 發佈事件。

// ChildComponent.vue
import eventHub from './eventHub'

export default {
  mounted() {
    // adding eventHub listener
    eventHub.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    // removing eventHub listener
    eventHub.$off('custom-event')
  }
}

// ParentComponent.vue
import eventHub from './eventHub'

export default {
  methods: {
    callGlobalCustomEvent() {
      eventHub.$emit('custom-event')
    }
  }
}

vue3 從實例中完全刪除了 off 和 emit 仍然是現有API的一部分，因爲它用於觸發由父組件以聲明方式附加的事件。

vue3 不支持 eventBus，那麼官方推薦的做法是使用第三方庫：mitt，tiny-emitter。

vue3 不支持 Filters 過濾器，filters 過濾器已從 Vue 3.0 中刪除，不再支持。

在2.x中，開發人員可以使用過濾器來處理常見的文本格式。

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
 export default {
   props: {
     accountBalance: {
       type: Number,
       required: true
     }
   },
   filters: {
     currencyUSD(value) {
       return '$' + value
     }
   }
 }
</script>

雖然這看起來很方便，但它需要一個自定義語法，打破大括號內表達式 “只是JavaScript” 的原則，這既增加了學習成本，也增加實現邏輯的成本。

在3.x中，過濾器被刪除，不再受支持。相反，官方建議用方法調用或計算屬性替換它們。

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    computed: {
      accountInUSD() {
        return '$' + this.accountBalance
      }
    }
  }
</script>

官方建議用計算屬性或方法代替過濾器，而不是使用過濾器。