vue3被删除的两个功能

87 阅读 0 评论 58 点赞

我是靠谱客的博主美满路灯，最近开发中收集的这篇文章主要介绍vue3被删除的两个功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

vue3 除了增加很多的功能之后，其实我们也需要关注 vue2 中有哪些功能被删除了，今天就讨论之前被删除的一些功能。

vue3 不支持 eventBus 了，因为原先实例上的三个方法 $on、$off 和 $once 被删除掉了。

那么之前的做法是在一个文件中创建了实例然后导出给任何地方的组件全局使用。

// eventHub.js


const eventHub = new Vue()
export default eventHub

以创建在整个项目中使用的全局事件监听器，然后通过 $on 订阅事件，通过 $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 从实例中完全删除了 $on、$off 和 $once 方法。$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>

官方建议用计算属性或方法代替过滤器，而不是使用过滤器。