# Vue中与服务器交互
其实就是`AJAX`，我们不选用原生的`XMLHttpRequest`来实现，我们通过官方推荐的`Axios`来进行访问数据。究竟数据在哪里请求会好一些呢？
>[success] 1. 在生命周期中 进行AJAX
> 2. 生命周期中可以访问到data的数据，并且可以修改data中的数据。
我们在实例的所有生命周期中添加修改`data`数据的做法。我们添加一个查看一下效果。我们发现在`created`、`beforeMount`、`mounted`、`beforeUpdate`和`updated`是可以对`data`中数据进行修改。而销毁阶段的生命周期中对数据的修改是不会生效的。
>[danger] 注意
> updated这个生命周其中对数据一旦进行修改，那么就会进入死循环。所以updated这个生命周期也不可以进行AJAX；
> mounted生命周期中进行修改data中的数据，会引起beforeUpdate和updated生命周期执行，会浪费性能。我也可以将其排除掉。
> beforeMount在这个生命周期之前经历过编译，并且形成了虚拟dom，如果再修改数据会重新引起编译成虚拟dom。编译其实就是一个函数。如果不理解虚拟dom也不打紧。只需要知道在这个生命周期之前，已经执行过一个函数。如果在这个生命周期中修改了数据，那么这个函数也会重新执行。导致性能浪费。
>[success] 总结：
> 可以进行AJAX操作的生命周期有**created**、**beforeUpdate**这两个生命周期。
> created执行时，编译函数并未执行。只是将数据进行了修改。节省了性能。berforeUpdate生命周期，是当页面中数据发生改变会触发。也可以进行ajax。
## AJAX
```
……
created(){
axios.get('./data.json').then( (data)=> {
this.list = data.data.list;
})
},
……
```
