前端面试遇到的机试题，大家来讨论一下。我想把这个实现功能理解透彻

Question

<script type="text/javascript">    var menu = [            {"type_id":1,"name":"大菜","food":[                                            {"food_id":1,"name":"鱼香肉丝","price":"10"},                                            {"food_id":2,"name":"红烧肉","price":"11"},                                            {"food_id":3,"name":"香辣粉","price":"12"}                                            ]},            {"type_id":2,"name":"中菜","food":[                                            {"food_id":4,"name":"小炒肉","price":"13"},                                            {"food_id":5,"name":"云吞","price":"14"}                                            ]},            {"type_id":3,"name":"小菜","food":[                                            {"food_id":6,"name":"雪糕","price":"15"},                                            {"food_id":7,"name":"黄瓜","price":"16"}                                            ]}              ];step 1: 根据menu的数据，动态生成一个二级联运菜单step 2: 实现动态增加、修改、删除菜单dom节点，同时保持dom结构与json保持同步step 3: 实现通过拖拽修改菜单结构（可使用jQuery插件），同时保持dom结构与json保持同步

Answer 1

如果是用vue 估计还挺好做的