“sortItem”计算属性中的意外副作用答案

【问题标题】：Unexpected side effect in "sortItem" computed property“sortItem”计算属性中的意外副作用
【发布时间】：2019-06-29 18:32:21
【问题描述】：

当我使用sortItem 时，我收到以下错误：““sortItem”计算属性中的意外副作用”。我该如何解决这个问题？

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

【问题讨论】：

您在排序时可能正在改变状态。试试这个this.items.slice(0).sort....。
请编辑您的问题以使其更清晰。检查how to ask?是否有帮助。

标签： javascript vue.js

【解决方案1】：

您收到此错误，因为Array.prototype.sort 对数组进行了原地排序。

这是什么意思？

就地算法修改现有数据结构，而不是创建副本并修改该结构。这意味着您只有修改后的数据结构，而不是拥有一种原始数据结构和一种修改后的数据结构。这样做显然比制作副本更节省空间。

我们可以使用以下 sn-p 轻松演示这一点。请注意，myUnsortedArray 突然包含一个排序数组，即使我们在最初的数组之后没有进行任何赋值。

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

为什么会报错

Vue 中的计算属性是pure functions。

您定义计算属性的计算方式。在幕后，Vue 将确定您的计算属性依赖于哪些变量，并且只要其中一个依赖项发生更改并且计算属性在某处被使用，就会默默地重新计算您的计算属性。

当您为计算属性引入副作用时，例如更改组件的本地状态，您会引入难以调试的行为。它假设 Vue 何时以及如何重新计算计算属性。相反，您应该将副作用放在方法中，或者如果您没有其他选择，则将其放在观察者中。

如何解决

“修复”它的一种方法是在排序之前复制数组。有两种方法：

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

更好的修复方法是，在创建或添加项目列表时对其进行排序。

进一步阅读

为了更好地理解这一点，我建议阅读“原语”、“引用”和“作用域”。

【讨论】：