尽管看到更新的值，Vue Object 没有返回更新的值

Question

我正在为 Vue.js 编写测试，并且我正在尝试编写测试以确保在更改某些道具以进行分页时，组件中的结果值会正确更新。

因此，当我 console.log 组件时，我看到了正确更新的值，但是当我尝试从字面上获取该属性时，它给了我旧的和过时的值。 查看以下屏幕截图中的 rangeList 以了解我的意思：

这是我的代码，以便您了解是如何生成此输出的。

pagComp.$refs.component.limit = 10;
pagComp.$refs.component.pages = 145;
console.log(pagComp.$refs.component);
console.log('RangList: ' + pagComp.$refs.component.rangeList.length);  

下面是修改rangeList的代码：

 createListOfRanges() {
   let range = [];
   for(let i = 0; i < this.pages; i++) {
     range.push(i);
   }
   this.rangeList = [];
   while(range.length > 0) {
     this.rangeList.push(range.splice(0, this.rangeLength));
   }
   this.correctLastRange();
 },     

最后，这个函数在两个地方被调用：创建组件的时候，以及pages属性改变的时候。这是观察者：

watch: {
 pages(val) {
   this.createListOfRanges();
 }

}，

Answer 1

我发现这部分代码存在一些问题：

while(range.length > 0) {
    this.rangeList.push(range.splice(0, this.rangeLength));
}

range.splice(..) 返回一个数组，该数组被推入this.rangeList

暂时忘记这一点。看下面的例子：

x = [1, 2, 3, 4]
x.splice(0, 2)  // result: [1, 2]

正如您在上面看到的，splice 返回一个数组，而不是一个元素。现在，在上面的同一个例子中：

x = [1, 2, 3, 4]
y = [10, 11]
y.push(x.splice(0, 2))

检查 y 的值。它将是[10, 11, [1, 2] ]。它是另一个数组中的一个数组。在这里看起来意义不大。您可以直接在开发者控制台中进行上述x 和y 实验。

在您的情况下，您的 x 恰好是 createListOfRanges 方法中的本地 range 数组，而您的 y 是属于您的 Vue 组件的 this.rangeList。

您能否在该区域检查您的应用逻辑，看看这是否真的是您想要做的？

要调试 Vue.js 应用程序，您还需要 Vue devtools：https://github.com/vuejs/vue-devtools - 它比 console.log() 好得多

Answer 2

虽然@Mani 正好在给您问题的代码行上，但您推送到rangeList。

createListOfRanges() {
  let range = [];
  for(let i = 0; i < this.pages; i++) {
    range.push(i);
  }

  this.rangeList = [];
  while(range.length > 0) {
    this.rangeList.push(range.splice(0, this.rangeLength));
  }
  this.correctLastRange();
},

推送拼接结果只会生成一个包含所有范围元素的元素。

试试改成

this.rangeList.push(range.shift());

尽管您的功能可以通过将 for(let i = 0; i < this.pages; i++) { i 值直接推送到 rangeList 来简化，除非这是一种简化。

这个JSFiddle 显示了我在说什么。

Answer 3

我很欣赏上面的答案，但它们不是问题所在。

问题在于 Vue 的生命周期。我不是 100% 确定为什么，但是当页面和限制变量发生变化时，页面观察器（如上所示）需要另一个时间来执行并更新组件。因此，它不会出现在我的测试中。所以我所做的就是像这样使用nextTick，这解决了这个问题。

pagVue.limit = 10;  // limit and pages change together every time automatically
pagVue.pages = 145;
Vue.nextTick(() => {
  expect(pagination.rangeList.length).toBe(25);
})