Vue异步更新数组元素时监听器未触发问题及实现合理性咨询

安全阿岳

2026-5-28

嘿，我来帮你拆解一下你的问题，一步步解决这些困扰：

1. 实现方式的合理性与数组清空操作

先说说你的数组处理逻辑：

this.articles.splice(0);
this.articles.splice(data.data.length);

第一行splice(0)已经把数组完全清空了，第二行其实没有任何作用（空数组的索引超出范围，不会执行任何删除操作），可以直接简化成this.articles = []，代码更简洁易懂。

你需要清空数组避免旧文章残留的思路是对的，但当前v-for使用index作为:key是个隐藏隐患。Vue依赖key来跟踪列表项的身份，用index当key的话，当数组内容整体替换时，Vue会复用现有组件实例而非重新创建，这会导致后续props的更新无法被正确监听——这和你第二个问题的watch触发异常直接相关。建议改用文章的唯一标识作为key，比如article.permlink，因为permlink是全局唯一的，这样Vue能精准识别每个列表项的变化，不会复用错误的组件实例。

另外，你的异步请求逻辑可以用Promise.all优化，统一处理所有请求完成的状态，但当前逐次用Vue.set更新的方式也是可行的，只是Promise.all会让代码逻辑更清晰。

2. 加载Spinner的问题：监听器未触发的原因与修复

为什么watch没触发？

有几个核心原因：

组件初始化时props已完成赋值：如果异步请求完成得太快，组件刚创建时blogEntry就已经有有效值了，watch只会监听变化过程，初始赋值不会触发回调，所以这部分组件的watch不会执行。
v-for的key用index导致组件复用：如第一个问题所说，index作为key会让Vue复用旧组件实例，当新文章替换旧文章时，props的变化可能无法被watch正确捕获（尤其是异步请求顺序混乱时）。
模板结构错误导致Loading无法显示：你的ArticlePreview模板外层有<div class="row" v-if="blogEntry">，这意味着当blogEntry不存在时，整个row都不会渲染，里面的v-else自然也看不到Loading状态——这是你看不到Spinner的直接原因！

修复步骤：

步骤1：修正模板结构，让Loading能正常显示

去掉外层的v-if="blogEntry"，确保不管blogEntry是否存在，row都能渲染，这样Loading才能显示出来：

<template>
  <div class="container-fluid">
    <div class="row">
      <template v-if="blogEntry">
        <!-- 原有的文章内容 -->
        <div class="imageframe col-md-3">
          <div class="blog-image">
            <img :src="blogEntry.previewImage" style="border-radius: 5px;">
          </div>
        </div>
        <div class="col-md-9">
          <h5 class="font-weight-bold" style="margin-top:5px;">
            <router-link :to="{ name: 'Article', params: {author: blogEntry.author, permlink: blogEntry.permlink } }">
              {{blogEntry.title}}
            </router-link>
          </h5>
          <div class="multiline-ellipsis">
            <p>{{blogEntry.previewBody}}</p>
          </div>
          <span class="metadata">
            <i>by <a :href="AuthorBlogLink">{{blogEntry.author}}</a> on {{blogEntry.created | formatDate}}</i>
          </span>
        </div>
      </template>
      <template v-else>
        <!-- 替换成你需要的Spinner组件，这里用Bootstrap的示例 -->
        <div class="col-12 text-center py-5">
          <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

步骤2：修复watch触发问题，覆盖初始状态

watch只监听变化，所以需要在组件初始化时（比如created钩子）手动检查blogEntry的初始值，设置loading状态：

export default Vue.extend({
  props: ['blogEntry'],
  data: function () {
    return {
      loading: true
    }
  },
  created() {
    // 初始化时检查blogEntry是否存在，设置初始loading状态
    this.loading = !this.blogEntry;
  },
  watch: {
    blogEntry(newValue) {
      console.log('watch');
      this.loading = !newValue;
    }
  }
});

如果想用loading状态来控制显示，也可以把模板里的判断改成v-if="!loading && blogEntry"，逻辑更清晰。

步骤3：修改v-for的key为唯一标识

在Home组件的v-for中，把:key="index"改成:key="article.permlink"（或数据中其他唯一字段）：

<div class="row" v-for="(article, index) in articles" :key="article.permlink">
  <ArticlePreview v-bind:blogEntry="article"></ArticlePreview>
</div>

这样Vue会为每个新文章创建独立的组件实例，确保watch能正确捕获props的变化。

步骤4：优化数组更新逻辑，提前渲染Loading占位

先填充空占位符到数组中，确保v-for先渲染对应数量的Loading组件，等异步请求完成后再替换成真实数据：

loadContent() {
  fetch("./api/v1/articles.php?page=" + this.pageIndex)
    .then(response => response.json())
    .then((data) => {
      this.nofPages = Math.ceil(data.nofItems/10);
      // 清空数组，并用null填充对应长度的占位符
      this.articles = new Array(data.data.length).fill(null);
      
      let index :number;
      for(index = 0; index < data.data.length; index++) {
        createArticleAsync(data.data[index].name, data.data[index].permlink)
          .then((article: BlogEntry) => {
            console.log('async');
            Vue.set(this.articles, index, article);
          });
      }
    })
}

这样用户打开页面或切换分页时，会先看到一排Spinner，等文章数据加载完成后逐个替换成内容，体验更流畅。

内容的提问来源于stack exchange，提问作者Jef Patat

Vue异步更新数组元素时监听器未触发问题及实现合理性咨询

1. 实现方式的合理性与数组清空操作 #

2. 加载Spinner的问题：监听器未触发的原因与修复 #

为什么watch没触发？ #

修复步骤： #