Vue组件之极简的地址选择器的实现-创新互联

一、前言

创新互联服务项目包括达孜网站建设、达孜网站制作、达孜网页制作以及达孜网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，达孜网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到达孜省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。

GitHub地址：Vue-location_Select

二、需要学习的地方

（1）数据更新Vue无法监控

首先要说一下的就是这个点，我们在Vue中有个好处就是可以不用操作dom，直接操作数据。但是这其实也有Vue无法监控的数据。如数组和对象。当然这里只是指一小部分操作而已，大部分操作都是没毛病的。接下来说说哪些数据操作Vue无法监控

1、数组

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength

意思就是下面的情况都不能监控到，因此这样改变数组是不会刷新视图的

var vm = new Vue({
 data: {
  items: ['a', 'b', 'c']
 }
})
vm.items[1] = 'x' // 不是响应性的,
vm.items.length = 2 // 不是响应性的

本文名称：Vue组件之极简的地址选择器的实现-创新互联
标题来源：http://www.cdkjz.cn/article/cesdos.html