javascript - Unexpected side effect in "sortItem" computed property - Stack Overflow

admin管理员组

文章数量:1022795

When I use sortItem, I get the following error: "Unexpected side effect in "sortItem" puted property". How do I solve this problem?

puted:{
    sortItem(){
      return this.items.sort((a,b)=>{
        return b.time - a.time
      })
    }
  },

When I use sortItem, I get the following error: "Unexpected side effect in "sortItem" puted property". How do I solve this problem?

puted:{
    sortItem(){
      return this.items.sort((a,b)=>{
        return b.time - a.time
      })
    }
  },

• javascript
• vue.js

Share Improve this question Follow edited Jun 30, 2019 at 11:05 Sumurai8 20.8k1111 gold badges6969 silver badges102102 bronze badges asked Jun 29, 2019 at 18:32 PChanaPChana 4111 silver badge22 bronze badges 2

• You are probably mutating the state when you sort. Try this this.items.slice(0).sort..... – Siri Commented Jun 29, 2019 at 18:34
• Please edit your question to make it clearer. Check how to ask? if that helps. – Nino Filiu Commented Jun 29, 2019 at 18:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You get this error, because Array.prototype.sort sorts an array in place.

What does that mean?

An in-place algorithm modifies the existing data structure instead of creating a copy and modifying that one instead. This means that instead of having one original data structure and one modified data structure, you only have the modified data structure. Doing this is obviously much more space efficient than making a copy.

We can demonstrate this easily with the following snippet. Notice that myUnsortedArray suddenly contains a sorted array, even though we did not do any assignment after the initial one.

let myUnsortedArray = [5, 4, 1, 3, 2];
console.log("Unsorted array", myUnsortedArray); // 5, 4, 1, 3, 2

let mySortedArray = myUnsortedArray.sort();
console.log("Sorted array", mySortedArray); // 1, 2, 3, 4, 5
console.log("Unsorted array again", myUnsortedArray); // 1, 2, 3, 4, 5

Why does it give an error

Computed properties in Vue are meant to be pure functions.

You define how a puted property should be calculated. Behind the scenes Vue will determine which variables your puted property depends on, and will silently recalculate your puted property whenever one of the dependencies changes and the puted property is being used somewhere.

When you introduce side-effects to your puted property, like changing the local state of your ponent, you introduce hard to debug behaviour. It places assumptions on when, and how, Vue will repute the puted property. Instead, you should put side-effects in methods, or if you have no other options, in a watcher.

How to fix it

One way of "fixing" it is to copy the array before sorting it. Two ways of doing this are:

[...this.items].sort((a, b) => b.time - a.time)
this.items.slice(0).sort((a, b) => b.time - a.time)

A better way of fixing is, is by sorting the item list whenever you make it, or add to it.

Further reading

To better understand this, I would remend reading up on "primitives", "references" and "scopes".

When I use sortItem, I get the following error: "Unexpected side effect in "sortItem" puted property". How do I solve this problem?

puted:{
    sortItem(){
      return this.items.sort((a,b)=>{
        return b.time - a.time
      })
    }
  },

When I use sortItem, I get the following error: "Unexpected side effect in "sortItem" puted property". How do I solve this problem?

puted:{
    sortItem(){
      return this.items.sort((a,b)=>{
        return b.time - a.time
      })
    }
  },

• javascript
• vue.js

Share Improve this question Follow edited Jun 30, 2019 at 11:05 Sumurai8 20.8k1111 gold badges6969 silver badges102102 bronze badges asked Jun 29, 2019 at 18:32 PChanaPChana 4111 silver badge22 bronze badges 2

• You are probably mutating the state when you sort. Try this this.items.slice(0).sort..... – Siri Commented Jun 29, 2019 at 18:34
• Please edit your question to make it clearer. Check how to ask? if that helps. – Nino Filiu Commented Jun 29, 2019 at 18:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You get this error, because Array.prototype.sort sorts an array in place.

What does that mean?

An in-place algorithm modifies the existing data structure instead of creating a copy and modifying that one instead. This means that instead of having one original data structure and one modified data structure, you only have the modified data structure. Doing this is obviously much more space efficient than making a copy.

We can demonstrate this easily with the following snippet. Notice that myUnsortedArray suddenly contains a sorted array, even though we did not do any assignment after the initial one.

let myUnsortedArray = [5, 4, 1, 3, 2];
console.log("Unsorted array", myUnsortedArray); // 5, 4, 1, 3, 2

let mySortedArray = myUnsortedArray.sort();
console.log("Sorted array", mySortedArray); // 1, 2, 3, 4, 5
console.log("Unsorted array again", myUnsortedArray); // 1, 2, 3, 4, 5

Why does it give an error

Computed properties in Vue are meant to be pure functions.

You define how a puted property should be calculated. Behind the scenes Vue will determine which variables your puted property depends on, and will silently recalculate your puted property whenever one of the dependencies changes and the puted property is being used somewhere.

When you introduce side-effects to your puted property, like changing the local state of your ponent, you introduce hard to debug behaviour. It places assumptions on when, and how, Vue will repute the puted property. Instead, you should put side-effects in methods, or if you have no other options, in a watcher.

How to fix it

One way of "fixing" it is to copy the array before sorting it. Two ways of doing this are:

[...this.items].sort((a, b) => b.time - a.time)
this.items.slice(0).sort((a, b) => b.time - a.time)

A better way of fixing is, is by sorting the item list whenever you make it, or add to it.

Further reading

To better understand this, I would remend reading up on "primitives", "references" and "scopes".

本文标签： javascriptUnexpected side effect in quotsortItemquot computed propertyStack Overflow