一、前言
本文用Vue完成一个极简的地点选择器，我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说，我们先上demo图。因为每个人的需要不一样，我这边就不在实现更多的功能，所以留有更大的空间供大家增删改。
GitHub地址：Vue-location_Select
二、需要学习的地方
（1）数据更新Vue无法监控
首先要说一下的就是这个点，我们在Vue中有个好处就是可以不用操作dom，直接操作数据。但是这其实也有Vue无法监控的数据。如数组和对象。当然这里只是指一小部分操作而已，大部分操作都是没毛病的。接下来说说哪些数据操作Vue无法监控
1、数组
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
- 当你利用索引直接设置一个项时，例如：
vm.items[indexOfItem] = newValue - 当你修改数组的长度时，例如：
vm.items.length = newLength
意思就是下面的情况都不能监控到，因此这样改变数组是不会刷新视图的
这样就可以使得Vue监控到数组操作的变化。当然还有以下的操作Vue也可以监控到的
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
2.对象
由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除！ 这个是重点，如果动态的添加对象属性的话，那么请注意你添加对象属性的方式是否为$set，不然的话视图很有可能不更新。
vm.userProfile.age = 27; //看着没问题，实际上Vue无法监控
因此解决办法也是老办法，用vm.$set(vm.userProfile,'age',27);
使用object.assign()添加多个属性也要注意一下用法
错误
Object.assign(vm.userProfile,{
age: 27,favoriteColor: 'Vue Green'
})
//正确
vm.userProfile = Object.assign({},vm.userProfile,favoriteColor: 'Vue Green'
})
（2）V-for的用法
1.遍历数组
这里直接撸码，一看就懂
//习惯性用法
<div v-for="(val,index) in arr" :key="index">
<div v-for="(val,index) in arr" :key="index">
