vue怎么遍历多层json

Vue中如何优雅遍历多层JSON数据

在Vue开发中，JSON数据是前后端交互的核心载体，而多层嵌套的JSON结构（如树形数据、多级分类、复杂配置等）更是常见场景，如何高效遍历多层JSON，实现数据的渲染、处理或转换，是Vue开发者必须的技能，本文将结合Vue的响应式特性，从基础到进阶,详细讲解遍历多层JSON的多种方法及最佳实践。

多层JSON的常见场景与遍历需求

多层JSON通常指包含嵌套对象或数组的数据结构，

{
  "id": 1,
  "name": "电子产品",
  "children": [
    {
      "id": 2,
      "name": "手机",
      "children": [
        { "id": 3, "name": "iPhone 15", "price": 5999 },
        { "id": 4, "name": "华为Mate 60", "price": 6999 }
      ]
    },
    {
      "id": 5,
      "name": "电脑",
      "children": [
        { "id": 6, "name": "MacBook Pro", "price": 12999 },
        { "id": 7, "name": "联想小新", "price": 4999 }
      ]
    }
  ]
}

遍历这类数据的核心需求包括：

• 渲染树形结构（如菜单、分类列表）；
• 查找/过滤特定节点（如根据ID查找商品）；
• 转换数据格式（如扁平化处理）；
• 响应式更新（确保数据变化触发视图更新）。

Vue中遍历多层JSON的常用方法

递归组件：树形结构的优雅渲染

递归是处理嵌套数据最直观的方式，而Vue的递归组件允许组件在模板中调用自身,完美契合树形数据的渲染需求。

实现步骤：

• 定义递归组件：通过name属性组件自身，并在模板中通过v-if控制递归终止条件；
• 传递层级数据：通过props接收当前层级的子数据,并在递归调用时传递下一层级数据。

示例代码：

<!-- TreeItem.vue 递归组件 -->
<template>
  <div class="tree-item">
    <div class="node">{{ node.name }}</div>
    <div v-if="node.children && node.children.length" class="children">
      <tree-item
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: 'TreeItem', // 组件名称必须与调用名称一致
  props: {
    node: {
      type: Object,
      required: true
    }
  }
}
</script>
<style scoped>
.tree-item {
  margin-left: 20px;
}
.node {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
.children {
  margin-left: 20px;
}
</style>

父组件中使用：

<template>
  <div>
    <tree-item :node="rootNode" />
  </div>
</template>
<script>
import TreeItem from './TreeItem.vue'
export default {
  components: { TreeItem },
  data() {
    return {
      rootNode: {
        id: 1,
        name: "电子产品",
        children: [
          {
            id: 2,
            name: "手机",
            children: [
              { id: 3, name: "iPhone 15", price: 5999 },
              { id: 4, name: "华为Mate 60", price: 6999 }
            ]
          }
          // 其他子节点...
        ]
      }
    }
  }
}
</script>

关键点：

• 递归组件必须设置name属性，且模板中调用时名称需与name一致；
• 必须有明确的递归终止条件（如v-if="node.children && node.children.length"），避免无限循环；
• 每层递归传递唯一key（如节点ID）,确保Vue正确追踪节点。

递归函数：灵活处理数据逻辑

如果需要对多层JSON进行查找、过滤、转换等操作（而非仅渲染）,递归函数是更灵活的选择。

示例1：递归查找节点

// 在Vue组件中定义递归查找方法
methods: {
  findNodeById(node, id) {
    if (node.id === id) return node
    if (node.children && node.children.length) {
      for (let child of node.children) {
        const found = this.findNodeById(child, id)
        if (found) return found
      }
    }
    return null
  }
}

示例2：递归过滤节点

methods: {
  filterNodes(node, predicate) {
    const filtered = { ...node }
    if (node.children && node.children.length) {
      filtered.children = node.children
        .map(child => this.filterNodes(child, predicate))
        .filter(child => child !== null)
    }
    // 如果当前节点不符合条件且无子节点，则返回null
    if (!predicate(filtered) && (!filtered.children || !filtered.children.length)) {
      return null
    }
    return filtered
  }
}
// 使用示例
const filteredTree = this.filterNodes(this.rootNode, node => node.price > 5000)

关键点：

• 递归函数需明确终止条件（如无子节点时返回）；
• 处理数组时，建议先用map处理每个子元素，再用filter过滤无效结果；
• 对于复杂逻辑，可结合lodash的_.get、_.cloneDeep等工具简化代码。

工具函数：结合lodash简化嵌套操作

lodash提供了强大的工具方法，能大幅简化多层JSON的处理,尤其适合复杂场景。

安装lodash：

npm install lodash

常用方法示例：

• 递归遍历：_.each、_.map（支持深层遍历）

  import { map } from 'lodash'
  // 递归提取所有节点名称
  const allNames = map(this.rootNode, 'name', (value, key, parent) => {
    return parent.children ? [value, ...map(parent.children, 'name')] : value
  })

• 扁平化处理：_.flattenDeep（将多层数组转为一维）

  import { flattenDeep } from 'lodash'
  // 假设数据中包含多层子节点数组
  const flatNodes = flattenDeep(this.rootNode.children)

• 查找节点：_.find（支持自定义深度查找）

  import { find } from 'lodash'
  const targetNode = find(this.rootNode, { id: 3 })

关键点：

• lodash的递归方法默认会遍历所有嵌套层级，无需手动控制终止条件；
• 对于大型数据，lodash的方法经过性能优化，比手写递归更高效；
• 注意_.cloneDeep等深拷贝方法的使用场景,避免直接修改响应式数据。

响应式处理：确保数据变化触发视图更新

Vue的响应式系统要求，直接修改嵌套JSON的深层属性时,需确保触发视图更新。

问题场景：

// 错误示例：直接修改深层属性，视图可能不更新
this.rootNode.children[0].children[0].price = 5500

解决方案：

• Vue.set / this.$set：添加响应式属性

  // 如果属性不存在，使用Vue.set添加
  this.$set(this.rootNode.children[0].children[0], 'price', 5500)

• Object.assign / lodash.assign：替换整个对象

  // 替换整个子节点对象，触发响应式更新
  this.rootNode.children[0].children[0] = {
    ...this.rootNode.children[0].children[0],
    price: 5500
  }

• Vue.observable（Vue 2.x）或reactive（Vue 3.x）：包装嵌套数据

  // Vue 3示例
  import { reactive } from 'vue'
  const state = reactive({
    rootNode: {
      children: [
        { price: 5999 }
      ]
    }
  })
  // 直接修改深层属性，Vue 3会自动响应
  state.rootNode.children[0].price = 5500

关键点：

• Vue 2中，直接修改嵌套对象的属性不会触发更新，需用Vue.set或整体替换