VueJS中mounted执行后如何正确使用v-for渲染接口返回列表数据

优先使用v-for指令实现，完全不推荐在mounted中手动操作DOM，这违反Vue数据驱动的核心设计原则。

为什么不能手动操作DOM #

你当前手写DOM插入的写法存在几个本质问题：

• Vue基于虚拟DOM做视图更新，你手动插入的节点不在虚拟DOM的映射关系里，后续组件重渲染时这些节点会被直接覆盖，还可能出现事件监听残留、内存泄漏问题
• 你写的appendTo是jQuery的语法，原生DOM不存在这个方法，且你拼接的模板字符串未闭合标签，本身就会报错
• 循环里反复执行document.querySelector查找节点属于无意义的性能消耗

v-for实现步骤 #

v-for本身就是Vue提供的列表渲染官方方案，接口返回的数组只要赋值给组件的响应式变量，就能直接被v-for绑定使用，不需要额外做传递操作，具体实现分三步：

• 在组件的响应式状态里提前声明存储列表的数组，初始值设为空数组
• 在模板中用v-for绑定这个数组，渲染需要的子节点结构，记得给:key绑定数组项的唯一标识（比如你这里的音乐id）
• mounted钩子中接口请求完成后，直接把返回的数组赋值给之前声明的响应式变量，Vue会自动完成DOM更新，不需要你写任何DOM操作代码

可直接运行的参考代码 #

<template>
  <!-- 外层section节点直接写在模板里，不需要手动查找 -->
  <section class="charts">
    <!-- v-for遍历响应式数组，自动生成对应数量的子节点 -->
    <div
      v-for="track in tracksArray"
      :key="track.id"
      class="container card chartsCard"
      :data-musicid="track.id"
    >
      <!-- 这里按需渲染每个音乐项的内容，比如歌名、歌手、封面即可 -->
      <p>{{ track.musicName }}</p>
      <p>{{ track.singer }}</p>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 声明响应式列表变量，初始为空
      tracksArray: []
    }
  },
  mounted() {
    apiLoop.then((result) => {
      // 接口返回数据直接赋值给响应式变量即可，视图自动更新
      this.tracksArray = result.data
    })
  }
}
</script>

额外提示：如果后续需要对这个列表做增删改操作，只需要修改tracksArray数组的值即可，视图会同步更新，全程不需要调用DOM相关API。

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