Vue对非冻结数据的冻结列表进行排序

Question

我有一个非冻结数据的冻结列表，目的是容器不是被动的，但元素是被动的，这样对N个事物中的一个的更新就不会触发对这N个事物的依赖性检查。

我有一个计算属性，它返回此列表的排序版本。但是Vue看到了冻结列表中包含的反应对象，对元素的任何更改都会触发排序后的计算道具。(目标是只有当有关排序的一些数据发生变化时，如方向或主要索引等，才触发它。(

一般概念是：

{
template: someTemplate,
data() {
return {
list: Object.freeze([
Vue.observable(foo),
Vue.observable(bar),
Vue.observable(baz),
Vue.observable(qux)
])
}
},
computed: {
sorted() {
return [...this.list].sort(someOrdering);
}
}
}

这是Vue的成语吗，还是我遗漏了什么？

Answer 1

。。。对元素的任何更改都会触发已排序的计算道具

我不得不不同意这种笼统的说法。看看下面的例子。如果列表按name排序；改变年龄"；不触发重新计算，反之亦然。因此，只有在上次排序期间使用的属性发生更改时，才会触发重新计算

const app = new Vue({
el: "#app",
data() {
return {
list: Object.freeze([
Vue.observable({ name: "Foo", age: 22}),
Vue.observable({ name: "Bar", age: 26}),
Vue.observable({ name: "Baz", age: 32}),
Vue.observable({ name: "Qux", age: 52})
]),
sortBy: 'name',
counter: 0
}
},
computed: {
sorted() {
console.log(`Sort executed ${this.counter++} times`)
return [...this.list].sort((a,b) => {
return a[this.sortBy] < b[this.sortBy] ? -1 : (a[this.sortBy] > b[this.sortBy] ? 1 : 0)
});
}
}
})
Vue.config.productionTip = false;
Vue.config.devtools = false;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="app">
<div>Sorted by: {{ sortBy }}</div>
<hr>
<button @click="list[0].name += 'o' ">Change name</button>
<button @click="list[0].age += 1 ">Change age</button>
<hr>
<button @click="sortBy = 'name'">Sort by name</button>
<button @click="sortBy = 'age'">Sort by age</button>
<hr>
<div v-for="item in sorted" :key="item.name">{{ item.name }} ({{item.age}})</div>
</div>