Problem description

Last year, in September 2020, vuE3 came out. A lot of new features were added, but some were also removed. For example, delete the filter function in VUE2. In the meantime, official advice: Replace filters with method calls or computed properties.

What is vUE’s filter

A filter can be popularly understood as a special method for processing data

  • For example, enumeration values can use filters: for example, 1, 2, 3, and 4 correspond to success or failure in progress or back
  • For example, the price is followed by a filter that formats the price to two decimal points
  • For example, time formatting

Please see the official document for details

According to?

In my opinion, the reason is that VUE3 needs to simplify the code, and the filter function is repeated. The functions, methods and computing attributes that can be realized by filter can also be realized basically. So simply filter this aspect of vUE source code to delete, in this case, more convenient maintenance.

Example analysis

Requirements describe

Suppose we have an express message, and the back end returns us the corresponding string 1, 2, 3, 4, 5, and 6 instead of the specific state value. Different states have a set of corresponding rules, for example, if the state is 1, the goods are to be shipped, etc. The specific effect diagram and the corresponding relationship between the states are as follows:

The HTML structure and data data are as follows

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{item. DeliverCompany}}</li>
      <li>{{item.expressState}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [{deliverCompany: "Jingdong Express".expressState: "1"}, {deliverCompany: "Sf Express".expressState: "2"}, {deliverCompany: "Zto Express".expressState: "3"}, {deliverCompany: "Post express".expressState: "4"}, {deliverCompany: "Bunny Express".expressState: "5"}, {deliverCompany: "Xx Express".expressState: null,}]}; }};</script>
Copy the code

Implementation using filter

Instead of using the global filter, we use the filter inside the component

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{item. DeliverCompany}}</li>
      <! -- Use filter syntax -->
      <li>Shipping status: {{item. ExpressState | showState}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // data ...... We don't have space to skip it
  // In the component, and then return different value content according to the state
  filters: {
    showState(state) {
      switch (state) {
        case "1":
          return "Goods to be shipped";
          break;
        case "2":
          return "Delivered";
          break;
        case "3":
          return "In transit";
          break;
        case "4":
          return "On the way.";
          break;
        case "5":
          return "Received";
          break;
        default:
          return "Courier information lost";
          break; ,}}}};</script>
Copy the code

Using a Computed implementation

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{item. DeliverCompany}}</li>
      <! -- Use computed properties -->
      <li>{{computedText(item.expressState)}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // data ...... We don't have space to skip it
  computed: {
    computedText() {
      // To evaluate a property, return a function that receives an argument
      return function (state) {
        switch (state) {
          case "1":
            return "Goods to be shipped";
            break;
          case "2":
            return "Delivered";
            break;
          case "3":
            return "In transit";
            break;
          case "4":
            return "On the way.";
            break;
          case "5":
            return "Received";
            break;
          default:
            return "Courier information lost";
            break; }}; ,}}};</script>
Copy the code

Implementation using Methods

<template>
  <div id="app">
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{item. DeliverCompany}}</li>
      <! -- How to use -->
      <li>{{methodsText(item.expressState)}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  // data ...... We don't have space to skip it
  methods: {
    methodsText(state) {
      switch (state) {
        case "1":
          return "Goods to be shipped";
          break;
        case "2":
          return "Delivered";
          break;
        case "3":
          return "In transit";
          break;
        case "4":
          return "On the way.";
          break;
        case "5":
          return "Received";
          break;
        default:
          return "Courier information lost";
          break; ,}}}};</script>
Copy the code

For example, a filter can process data. For example, for computed attributes and methods, data can be processed.

conclusion

Vue3 removes filter as follows:

Employee filter does much of the work that employee filter does, both computed and methods do, and they do much better than employee filter. Vue fired Filter. Filter is fired. After all, one more employee, more labor costs (employee Filter cried out)