面试题：Vue单选按钮与下拉菜单在复杂业务场景下的优化实践

实现思路

HTML 结构：创建单选按钮组和下拉菜单，分别为它们添加合适的 id 和 class 以便于操作。
事件监听：使用 JavaScript 为单选按钮添加 change 事件监听器。当单选按钮状态改变时，触发相应函数来更新下拉菜单。
动态更新下拉菜单：在事件处理函数中，根据单选按钮的值，从后端获取或从本地数据中筛选出对应的下拉菜单选项。
性能优化：
- 防抖（Debounce）：如果获取数据操作涉及到网络请求，使用防抖技术，避免用户频繁操作时产生过多无效请求。
- 虚拟 DOM（Vue、React 等框架适用）：如果使用前端框架（如 Vue 或 React），利用框架的虚拟 DOM 机制，框架会自动优化渲染，只更新真正变化的部分。
- 本地缓存：对于不经常变化的数据，可以在本地缓存，避免每次都重新获取。

关键代码片段（以原生 JavaScript 为例）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电商商品筛选</title>
</head>

<body>
    <input type="radio" id="radio1" name="category" value="electronics"> Electronics
    <input type="radio" id="radio2" name="category" value="clothes"> Clothes

    <select id="subcategory"></select>

    <script>
        // 模拟本地数据
        const subcategories = {
            electronics: ['Phones', 'Laptops', 'Tablets'],
            clothes: ['Shirts', 'Pants', 'Dresses']
        };

        const radioButtons = document.querySelectorAll('input[type="radio"]');
        const subcategorySelect = document.getElementById('subcategory');

        radioButtons.forEach(radio => {
            radio.addEventListener('change', function () {
                const selectedCategory = this.value;
                // 清空下拉菜单
                subcategorySelect.innerHTML = '';
                // 根据选中的类别添加选项
                subcategories[selectedCategory].forEach(subcategory => {
                    const option = document.createElement('option');
                    option.value = subcategory;
                    option.textContent = subcategory;
                    subcategorySelect.appendChild(option);
                });
            });
        });
    </script>
</body>

</html>

关键代码片段（以 Vue.js 为例）

<template>
    <div>
        <input type="radio" v-model="selectedCategory" value="electronics"> Electronics
        <input type="radio" v-model="selectedCategory" value="clothes"> Clothes

        <select>
            <option v-for="subcategory in subcategories[selectedCategory]" :key="subcategory" :value="subcategory">{{subcategory}}</option>
        </select>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedCategory: '',
            subcategories: {
                electronics: ['Phones', 'Laptops', 'Tablets'],
                clothes: ['Shirts', 'Pants', 'Dresses']
            }
        };
    }
};
</script>

关键代码片段（以 React.js 为例）

import React, { useState } from'react';

const App = () => {
    const [selectedCategory, setSelectedCategory] = useState('');
    const subcategories = {
        electronics: ['Phones', 'Laptops', 'Tablets'],
        clothes: ['Shirts', 'Pants', 'Dresses']
    };

    const handleRadioChange = (e) => {
        setSelectedCategory(e.target.value);
    };

    return (
        <div>
            <input type="radio" value="electronics" onChange={handleRadioChange} /> Electronics
            <input type="radio" value="clothes" onChange={handleRadioChange} /> Clothes

            <select>
                {subcategories[selectedCategory]?.map(subcategory => (
                    <option key={subcategory} value={subcategory}>{subcategory}</option>
                ))}
            </select>
        </div>
    );
};

export default App;

星途面试题库

面试题：Vue单选按钮与下拉菜单在复杂业务场景下的优化实践

知识考点

面试题答案

实现思路

关键代码片段（以原生 JavaScript 为例）

关键代码片段（以 Vue.js 为例）

关键代码片段（以 React.js 为例）