本文转载自微信公众号《JeffckyShare》，作者Jeffcky。转载请联系JeffckyShare公众号.首先说一下Vue2中的一个例子的实现，举个栗子。在开发过程中，我们只会使用省、市、区。这里的区也可以看作是三四线城市的县，如果我们要动态创建以县为单位的镇和村，更何况我们在全国各地的镇下划分不同的区域。我们使用Vue结合ElementUI来实现这个例子Vue2+ElementUI由于示例代码很多，这里先直接看效果，如下：具体代码如下，太多了吧？忽略它，我们只解释核心问题"width="800px"top="10vh"center>添加城镇移除城镇城镇名称地区、村庄{{region.regionTitle}}添加区域删除区域{{tag}}<span>确定取消直接看下面定义的数据结构，我们可以知道一共有三层遍历，第一层遍历从城镇开始，第二层遍历从城镇下的区域开始，最后一层遍历开始从区域Village下的区域（也就是上面的标签）形成：{areaId:0,towns:[{townName:'',regions:[{regionTitle:'',regionName:'',villageName:'',tags:[]}]}]}Vue2一直存在的问题是无法监听数组。如果我没记错的话，Vue2是通过Object.defineProperty()来监听对象的，也就是后台语言中对应属性的get和set方法结合上面的示例图和代码，当我们输入村名，然后按回车，村庄名称会添加到村庄数组中，然后通过el-tag标签遍历渲染下一个问题来了，此时我们要删除村庄，所以点击村庄标签的删除图标，有毫无疑问，区域下的村庄数组可以通过索引直接移除，但是，然而，根本无法移除，因为此时区域下的村庄是一个数组，而vue2无法对其进行监控，那就是，当我们移除数组中对应的村庄，但是在页面上无法同步删除，移除方法如下：handleClose(tindex,rindex,tagindex){letself=thisletregion=self.form.towns[tindex].regions[rindex]region.tags.splice(tagindex,1)}，那么如何在Vue2中解决这个问题呢？根据我们的例子，我们将输入的村名，即文本框绑定回车事件，然后将文本框绑定的模型数据添加到村数组中，所以此时我们假装给文本框绑定一个“占位符”再次，然后马上留空，给Vue2一个刚才数据没有绑定的“错觉”，所以上面删除标签的方法可以这样解决：handleClose(tindex,rindex,tagindex){letself=thisletregion=self.form.towns[tindex].regions[rindex]region.tags.splice(tagindex,1)//添加文字准备添加“占位符”，这样页面上的tag就可以删除region.villageName='placeholdercharacter'region.villageName=''},Vue3+ElementPlus,有空的时候尝试了Vue3结合ElementPlus，这个问题解决了。在Vue3中，所有的属性都是通过代理（proxy）来监听的，当然也包括Array，Vue3中相关的键盘事件，比如回车，已经通过v-on:key.enter绑定事件实现了
