Vue3+TypeScript implements a complete example of a recursive menu component

Preface
need
accomplish

First Render
Click on the menu item
Style distinction
Default highlight
Bugs caused by changes in data sources

Complete code

App.vue

Summarize

Preface

It’s been a long time since we last met, my friends. I just joined a new company recently and my schedule is very full. I don’t have time to write articles normally, so the update frequency will become slower.

I was bored at home on the weekend, and suddenly my younger brother came to me for urgent help. He said that when he was interviewing at Tencent, the other party gave him a recursive menu in Vue and asked him to implement it, so he came back to me for review.

It happens that this week is a short week, so I don't want to go out and play, so I'll just stay at home and write some code. I looked at the requirements and found that they are indeed quite complicated and require the use of recursive components.

I would like to take this opportunity to summarize an article about implementing recursive components with Vue3 + TS.

need

You can preview the effect in Github Pages first.

The requirement is that the backend will return a menu with potentially infinite levels in the following format:

[
  {
    id: 1,
    father_id: 0,
    status: 1,
    name: 'Life Science Competition',
    _child: [
      {
        id: 2,
        father_id: 1,
        status: 1,
        name: 'Field Practice',
        _child: [{ id: 3, father_id: 2, status: 1, name: 'Botany' }],
      },
      {
        id: 7,
        father_id: 1,
        status: 1,
        name: 'Scientific Research',
        _child: [
          { id: 8, father_id: 7, status: 1, name: 'Botany and Plant Physiology' },
          { id: 9, father_id: 7, status: 1, name: 'Zoology and Animal Physiology' },
          { id: 10, father_id: 7, status: 1, name: 'Microbiology' },
          { id: 11, father_id: 7, status: 1, name: 'Ecology' },
        ],
      },
      { id: 71, father_id: 1, status: 1, name: 'Add' },
    ],
  },
  {
    id: 56,
    father_id: 0,
    status: 1,
    name: 'Graduate Entrance Examination Related',
    _child: [
      { id: 57, father_id: 56, status: 1, name: 'Politics' },
      { id: 58, father_id: 56, status: 1, name: 'Foreign Language' },
    ],
  },
]

1. If the menu elements of each layer have the _child attribute, all submenus of this item will continue to be displayed after this menu is selected. Preview the animated image:

2. When you click on any level, you need to pass the complete id link of the menu to the outermost layer to request data from the parent component. For example, you click on the scientific research category. When emitting outward, it is also necessary to bring the ID of its first submenu Botany and Plant Physiology, and the ID of its parent menu Life Science Competition, that is, [1, 7, 8].

3. The style of each layer can be customized.

accomplish

This is obviously a requirement for a recursive component. When designing a recursive component, we must first think clearly about the mapping from data to views.

In the data returned by the backend, each layer of the array can correspond to a menu item, so the layer of the array corresponds to a row in the view. In the menu of the current layer, the child of the menu that is clicked and selected will be used as the submenu data and handed over to the recursive NestMenu component until the highlighted menu of a certain layer no longer has a child, and the recursion terminates.

Since the requirements require that the style of each layer may be different, each time we call the recursive component, we need to get a depth representing the level from the props of the parent component, and pass this depth + 1 to the recursive NestMenu component.

These are the main points, and then the coding implementation will be carried out.

First, let's look at the general structure of the template part of the NestMenu component:

<template>
  <div class="wrap">
    <div class="menu-wrap">
      <div
        class="menu-item"
        v-for="menuItem in data"
      >{{menuItem.name}}</div>
    </div>
    <nest-menu
      :key="activeId"
      :data="subMenu"
      :depth="depth + 1"
    ></nest-menu>
  </div>
</template>

As we expected, menu-wrap represents the current menu layer, and nest-menu is the component itself, which is responsible for recursively rendering subcomponents.

First Render

When we first get the data for the entire menu, we need to set the selected item of each menu layer to the first submenu by default. Since it is likely to be obtained asynchronously, it is best to watch this data to do this operation.

// When the menu data source changes, the first item of the current level is selected by default const activeId = ref<number | null>(null)

watch(
  () => props.data,
  (newData) => {
    if (!activeId.value) {
      if (newData && newData.length) {
        activeId.value = newData[0].id
      }
    }
  },
  {
    immediate: true,
  }
)

Now let's start from the top. The activeId of the first layer is set to the id of the life science competition. Note that the data we pass to the recursive child component, that is, the child of the life science competition, is obtained through subMenu, which is a calculated property:

const getActiveSubMenu = () => {
  return data.find(({ id }) => id === activeId.value)._child
}
const subMenu = computed(getActiveSubMenu)

In this way, the child of the life science competition is obtained and passed on as the data of the subcomponent.

Click on the menu item

Back to the previous demand design, after clicking the menu item, no matter which layer is clicked, the complete ID link needs to be passed to the outermost layer through emit, so we need to do some more processing here:

/**
 * Recursively collect the id of the first item in the submenu
 */
const getSubIds = (child) => {
  const subIds = []
  const traverse = (data) => {
    if (data && data.length) {
      const first = data[0]
      subIds.push(first.id)
      traverse(first._child)
    }
  }
  traverse(child)
  return subIds
}

const onMenuItemClick = (menuItem) => {
  const newActiveId = menuItem.id
  if (newActiveId !== activeId.value) {
    activeId.value = newActiveId
    const child = getActiveSubMenu()
    const subIds = getSubIds(child)
    // Concatenate the default first item ids of the submenu and emit to the parent component
    context.emit('change', [newActiveId, ...subIds])
  }
}

Since the rule we set before is that the first item of the submenu is selected by default after clicking the new menu, we also recursively find the first item in the submenu data and put it in subIds until the bottom layer.

Note the context.emit("change", [newId, ...subIds]); here, which emits the event upward. If this menu is a middle-level menu, then its parent component is also NestMenu. We need to listen to the change event when the NestMenu component is recursively called at the parent level.

<nest-menu
    :key="activeId"
    v-if="activeId !== null"
    :data="getActiveSubMenu()"
    :depth="depth + 1"
    @change="onSubActiveIdChange"
></nest-menu>

What should be done after the parent menu receives the change event of the child menu? Yes, it needs to be passed further upwards:

const onSubActiveIdChange = (ids) => {
  context.emit('change', [activeId.value].concat(ids))
}

Here you just need to simply splice your current activeId to the front of the array and then continue passing it upwards.

In this way, when a component at any level clicks the menu, it will first use its own activeId to splice the default activeId of all sub-levels, and then emit it upward layer by layer. And each parent menu above will put its own activeId in front, just like a relay.

Finally, we can easily get the complete id link in the application-level component:

<template>
  <nest-menu :data="menu" @change="activeIdsChange" />
</template>

export default {
  methods: {
    activeIdsChange(ids) {
      this.ids = ids;
      console.log("Currently selected id path", ids);
  },
},

Style distinction

Since we add depth + 1 every time we call a recursive component, we can achieve style differentiation by splicing this number after the class name.

<template>
  <div class="wrap">
    <div class="menu-wrap" :class="`menu-wrap-${depth}`">
      <div class="menu-item">{{menuItem.name}}</div>
    </div>
    <nest-menu />
  </div>
</template>

<style>
.menu-wrap-0 {
  background: #ffccc7;
}

.menu-wrap-1 {
  background: #fff7e6;
}

.menu-wrap-2 {
  background: #fcffe6;
}
</style>

Default highlight

After writing the above code, it is sufficient to meet the needs when there is no default value. At this time, the interviewer said that the product requires this component to be highlighted by default by passing in an id of any level.

In fact, this is not difficult for us. We can modify the code slightly. In the parent component, assume that we get an activeId through the URL parameter or any other method, and first find all the parents of this id through depth-first traversal.

const activeId = 7

const findPath = (menus, targetId) => {
  let ids

  const traverse = (subMenus, prev) => {
    if (ids) {
      return
    }
    if (!subMenus) {
      return
    }
    subMenus.forEach((subMenu) => {
      if (subMenu.id === activeId) {
        ids = [...prev, activeId]
        return
      }
      traverse(subMenu._child, [...prev, subMenu.id])
    })
  }

  traverse(menus, [])

  return ids
}

const ids = findPath(data, activeId)

Here I choose to bring the id of the previous layer when recursing, so that after finding the target id, I can easily splice the complete parent-child id array.

Then we pass the constructed ids as activeIds to NestMenu. At this time, NestMenu needs to change its design and become a "controlled component". Its rendering state is controlled by the data passed by our outer layer.

Therefore, we need to change the value logic when initializing the parameters, give priority to activeIds[depth], and when clicking the menu item, in the outermost page component, when the change event is received, the data of activeIds should be changed synchronously. This way, the data received by NestMenu will not be confused.

<template>
  <nest-menu :data="data" :defaultActiveIds="ids" @change="activeIdsChange" />
</template>

When NestMenu is initialized, it handles the situation where there are default values and gives priority to using the id value obtained from the array.

setup(props: IProps, context) {
  const { depth = 0, activeIds } = props;

  /**
   * Here activeIds may also be obtained asynchronously, so use watch to ensure initialization*/
  const activeId = ref<number | null | undefined>(null);
  watch(
    () => activeIds,
    (newActiveIds) => {
      if (newActiveIds) {
        const newActiveId = newActiveIds[depth];
        if (newActiveId) {
          activeId.value = newActiveId;
        }
      }
    },
    {
      immediate: true,
    }
  );
}

In this way, if the activeIds array cannot be obtained, the default is still null. In the logic of watching the menu data changes, if activeId is null, it will be initialized to the id of the first submenu.

watch(
  () => props.data,
  (newData) => {
    if (!activeId.value) {
      if (newData && newData.length) {
        activeId.value = newData[0].id
      }
    }
  },
  {
    immediate: true,
  }
)

When the outermost page container listens to the change event, the data source must be synchronized:

<template>
  <nest-menu :data="data" :activeIds="ids" @change="activeIdsChange" />
</template>

<script>
import { ref } from "vue";

export default {
  name: "App",
  setup() {
    const activeIdsChange = (newIds) => {
      ids.value = newIds;
    };

    return {
      ids,
      activeIdsChange,
    };
  },
};
</script>

In this way, when activeIds is passed in from outside, the highlight selection logic of the entire NestMenu can be controlled.

Bugs caused by changes in data sources

At this time, the interviewer made a slight change to your App file and demonstrated a bug like this:

The following logic is added to the setup function of App.vue:

onMounted(() => {
  setTimeout(() => {
    menu.value = [data[0]].slice()
  }, 1000)
})

That is to say, one second after the component is rendered, there is only one item left in the outermost layer of the menu. At this time, the interviewer clicks on the second item in the outermost layer within one second. After the data source changes, this component will report an error:

This is because the data source has changed, but the activeId state inside the component is still stuck on an id that no longer exists.

This will cause the computed property of subMenu to fail when it is calculated.

We slightly modify the logic of the watch data observation data source:

watch(
  () => props.data,
  (newData) => {
    if (!activeId.value) {
      if (newData && newData.length) {
        activeId.value = newData[0].id
      }
    }
    // If the value of `activeId` cannot be found in the data of the current level, it means that this value is invalid. // Adjust it to the id of the first submenu item in the data source
    if (!props.data.find(({ id }) => id === activeId.value)) {
      activeId.value = props.data?.[0].id
    }
  },
  {
    immediate: true,
    // Execute synchronously after observing data changes to prevent rendering errors flush: 'sync',
  }
)

Note that flush: "sync" is critical here. Vue3 triggers callbacks after watching for changes in the data source. By default, it is executed after post rendering. However, under the current requirements, if we use the wrong activeId to render, it will directly lead to an error, so we need to manually turn this watch into a synchronous behavior.

Now you no longer have to worry about rendering errors caused by changes in data sources.

Complete code

App.vue

<template>
  <nest-menu :data="data" :activeIds="ids" @change="activeIdsChange" />
</template>

<script>
import { ref } from "vue";
import NestMenu from "./components/NestMenu.vue";
import data from "./menu.js";
import { getSubIds } from "./util";

export default {
  name: "App",
  setup() {
    // Assume the default selected id is 7
    const activeId = 7;

    const findPath = (menus, targetId) => {
      let ids;

      const traverse = (subMenus, prev) => {
        if (ids) {
          return;
        }
        if (!subMenus) {
          return;
        }
        subMenus.forEach((subMenu) => {
          if (subMenu.id === activeId) {
            ids = [...prev, activeId];
            return;
          }
          traverse(subMenu._child, [...prev, subMenu.id]);
        });
      };

      traverse(menus, []);

      return ids;
    };

    const ids = ref(findPath(data, activeId));

    const activeIdsChange = (newIds) => {
      ids.value = newIds;
      console.log("Currently selected id path", newIds);
    };

    return {
      ids,
      activeIdsChange,
      data,
    };
  },
  components:
    NestMenu,
  },
};
</script>

NestMenu.vue

<template>
  <div class="wrap">
    <div class="menu-wrap" :class="`menu-wrap-${depth}`">
      <div
        class="menu-item"
        v-for="menuItem in data"
        :class="getActiveClass(menuItem.id)"
        @click="onMenuItemClick(menuItem)"
        :key="menuItem.id"
      >{{menuItem.name}}</div>
    </div>
    <nest-menu
      :key="activeId"
      v-if="subMenu && subMenu.length"
      :data="subMenu"
      :depth="depth + 1"
      :activeIds="activeIds"
      @change="onSubActiveIdChange"
    ></nest-menu>
  </div>
</template>

<script lang="ts">
import { watch, ref, onMounted, computed } from "vue";
import data from "../menu";

interface IProps {
  data: typeof data;
  depth: number;
  activeIds?: number[];
}

export default {
  name: "NestMenu",
  props: ["data", "depth", "activeIds"],
  setup(props: IProps, context) {
    const { depth = 0, activeIds, data } = props;

    /**
     * Here activeIds may also be obtained asynchronously, so use watch to ensure initialization*/
    const activeId = ref<number | null | undefined>(null);
    watch(
      () => activeIds,
      (newActiveIds) => {
        if (newActiveIds) {
          const newActiveId = newActiveIds[depth];
          if (newActiveId) {
            activeId.value = newActiveId;
          }
        }
      },
      {
        immediate: true,
        flush: 'sync'
      }
    );

    /**
     * When the menu data source changes, the first item of the current level is selected by default*/
    watch(
      () => props.data,
      (newData) => {
        if (!activeId.value) {
          if (newData && newData.length) {
            activeId.value = newData[0].id;
          }
        }
        // If the value of `activeId` cannot be found in the data of the current level, it means that this value is invalid. // Adjust it to the id of the first submenu item in the data source
        if (!props.data.find(({ id }) => id === activeId.value)) {
          activeId.value = props.data?.[0].id;
        }
      },
      {
        immediate: true,
        // Execute synchronously after observing data changes to prevent rendering errors flush: "sync",
      }
    );

    const onMenuItemClick = (menuItem) => {
      const newActiveId = menuItem.id;
      if (newActiveId !== activeId.value) {
        activeId.value = newActiveId;
        const child = getActiveSubMenu();
        const subIds = getSubIds(child);
        // Concatenate the default first item ids of the submenu and emit to the parent component
        context.emit("change", [newActiveId, ...subIds]);
      }
    };
    /**
     * When receiving the child component's updated activeId, * it needs to act as an intermediary to inform the parent component that the activeId has been updated*/
    const onSubActiveIdChange = (ids) => {
      context.emit("change", [activeId.value].concat(ids));
    };
    const getActiveSubMenu = () => {
      return props.data?.find(({ id }) => id === activeId.value)._child;
    };
    const subMenu = computed(getActiveSubMenu);

    /**
     * Style related */
    const getActiveClass = (id) => {
      if (id === activeId.value) {
        return "menu-active";
      }
      return "";
    };

    /**
     * Recursively collect the id of the first item in the submenu
     */
    const getSubIds = (child) => {
      const subIds = [];
      const traverse = (data) => {
        if (data && data.length) {
          const first = data[0];
          subIds.push(first.id);
          traverse(first._child);
        }
      };
      traverse(child);
      return subIds;
    };

    return {
      depth,
      activeId,
      subMenu,
      onMenuItemClick,
      onSubActiveIdChange,
      getActiveClass,
    };
  },
};
</script>

<style>
.wrap {
  padding: 12px 0;
}

.menu-wrap {
  display: flex;
  flex-wrap: wrap;
}

.menu-wrap-0 {
  background: #ffccc7;
}

.menu-wrap-1 {
  background: #fff7e6;
}

.menu-wrap-2 {
  background: #fcffe6;
}

.menu-item {
  margin-left: 16px;
  cursor: pointer;
  white-space: nowrap;
}

.menu-active {
  color: #f5222d;
}
</style>

Source code address

github.com/sl1673495/v…

Summarize

A recursive menu component is simple, but also difficult. If we don't understand Vue's asynchronous rendering and observation strategies, the bugs in the middle may bother us for a long time. Therefore, it is necessary to learn the principles appropriately.

When developing general components, you must pay attention to the timing of data source input (synchronous, asynchronous). For asynchronously input data, you must make good use of the watch API to observe changes and perform corresponding operations. Also, consider whether changes in the data source will conflict with the original state saved in the component, and perform cleanup operations at the appropriate time.

There is another small question. When I watch the data source of the NestMenu component, I choose to do it like this:

watch((() => props.data);

Instead of deconstructing and then observing:

const { data } = props;
watch(() => data);

Is there any difference between these two? This is another interview question that tests your depth.

This is the end of this article about implementing recursive menu components with Vue3+TypeScript. For more relevant Vue3+TypeScript recursive menu component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in: