We need to investigate the migration of VUE 2 to VUE 3 for internal sharing.

I think there’s only one translator online so far, the first few chapters.

But I was in a hurry, so I had to turn it over myself. Translator level 4 is not passed, all depends on Youdao and Google.

Filters in Vue 3

An overview of

Filters are no longer supported in Vue 3.0

2. X syntax

In 2.x, developers can use filters to apply common text formats.

Here’s an example:

<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>
Copy the code

While this may seem convenient, it requires a custom syntax that breaks the assumption that expressions in curly braces are just “JavaScript,” which has both learning costs and implementation costs.

3. Update x

In 3.x, the filter has been removed and is no longer supported. Instead, we recommend replacing them with method calls or computed properties.

Following the example above, here is how the new version is implemented.

<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>
Copy the code

Migration strategy

As an alternative to filters, we recommend using computed properties or methods instead.