javascript - 每次任何变量发生变化时，VueJS 中的列表都会重新渲染，即使是不相关的

Question

我以 JSON 格式下载了 1000 多个条目的日志。每个条目都是一个多级对象。我解析 JSON、对数组进行排序并对其进行过滤。我将其分为 3 个不同的“计算”函数，以避免过度解析或排序。每个“计算”函数都充当管道，从前一个函数获取数据，例如:

<div v-for="i in cArraySortedFiltered" 
     :key="i.id">...</div>

computed: {
  cArray() {
    return parse(json);
  },

  cArraySorted() {
    return cArray.sort(...);
  },

  cArraySortedFiltered() {
    return cArraySorted.filter(...);
  }
}

所以如果我只更改搜索字符串 arraySortedFiltered()会打电话的。

arraySortedFiltered 正在呈现为表格(不是真正的表格，而是风格化为表格的 div)。

问题:每次我通过 v-model 更改任何数据部分变量时需要 1-2 秒才能反射(reflect)更改:<input v-model="test"> 。如果我通过 @input 成功它工作正常:<input @change="changeVar"> .

Profiler 显示，每当任何数据部分变量发生变化时，Vue 都会重新渲染我的大表，即使与表相关的任何内容都没有更改，输入数据和排序/搜索变量都没有更改。为什么会这样以及如何避免它？

手册称 Vue 很智能，不会重新渲染未更改的数据。我检查了 - Vue 实际上并没有重新渲染列表(我更改了 div 中的文本 - 在我更改了不相关的变量后它还没有被重新渲染)。

Answer 1

计算 react 元素中的缓存变化。您的计算中没有任何反应元素。它无法知道 json 是否已更改，因此每次都必须运行计算。为 cArray 创建一个 data 项，而不是计算。