iview 升级指南 —— MenuItem 篇

iview 在今年 7 月 28 号发布了 3.0.0 版本，大版本升级往往意味着功能、接口的大变更。 虽然官网已经有长长的更新日志，但看起来还是有些抽象了， 所以我决定做个新旧版本的比较，盘点新版本到底为我们带来了什么新特性。

本篇是系列文章的第三篇，重点并不在介绍 MenuItem 的功能特性，而在于对其代码的讨论； 对其设计的思考。 班门弄斧，见谅。

唯一新增的特性 —— 支持链接模式

循例是该先聊聊新特性的。Menu 有四个关联的组件，分别为：Menu、MenuItem、SubMenu、MenuGroup， 这些组件的新旧版本之间并没有太大差异，向后兼容的很好，理论上可以平滑升级。 新版本只有 MenuItem 增加了一个特性：支持链接模式，可以通过向组件传入 to 属性启用，效果与 链接模式的 Button 完全一样，这里就不赘述了。

问题

MenuItem 是一个非常非常简单的组件，一开始觉得并没有太多好写的，细细看了代码...个人感觉问题不少，还是有必要单独写一篇文章聊聊的。

问题一： 代码重复

首先，依然是代码重复的问题，在 Button 篇中 我们已经见识了一些无意义的重复，在 MenuItem 组件中也是不遑多让啊：

<template>
    <a
        v-if="to"
        :href="linkUrl"
        :target="target"
        :class="classes"
        @click.exact="handleClickItem($event, false)"
        @click.ctrl="handleClickItem($event, true)"
        @click.meta="handleClickItem($event, true)"
        :style="itemStyle"><slot></slot></a>
    <li v-else :class="classes" @click.stop="handleClickItem" :style="itemStyle"><slot></slot></li>
</template>
复制代码

这段模板有两处重复，一是标签，二是事件绑定。

1. 重复的标签定义

模板中，通过判断 to 属性，确定需要渲染的标签类型，用于兼容新增的链接模式，这种写法很符合直觉，但有另一种更优雅的方案：is特性，同样的功能，用 is 实现：

/* 模拟MenuItem组件 */
Vue.component("MenuItem", {
  name: "MenuIte