本文主要介绍如何使用AJAX给Vue数组赋值。

AJAX（Asynchronous JavaScript And XML）是一种在Web应用中实现无刷新的技术，用于实现对服务器的异步通信。Vue是一种流行的JavaScript框架，用于构建用户界面。

使用AJAX给Vue数组赋值的场景很常见，比如从服务器获取数据并在前端展示。下面通过一个例子来说明。

// HTML
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
// JavaScript
var app = new Vue({
el: '#app',
data: {
items: []
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
var self = this;
// 发起AJAX请求
axios.get('/api/items')
.then(function(response) {
self.items = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
});

在上面的例子中，我们创建了一个Vue实例，其中有一个items数组用于存储从服务器端获取的数据。在mounted钩子函数中，我们调用fetchData方法来发起AJAX请求，并且将返回的数据赋值给items数组。

举个例子，假设服务器端返回的数据是一个包含商品名称的数组，如下所示：

// 服务器返回的数据
[ "商品1", "商品2", "商品3" ]

当AJAX请求成功后，Vue会自动更新视图，将数组中的每个元素渲染为列表中的一项。以此例为例，最终生成的HTML代码如下：

// 渲染后的HTML代码
<div id="app">
<ul>
<li>商品1</li>
<li>商品2</li>
<li>商品3</li>
</ul>
</div>

从上面的例子中可以看出，使用AJAX给Vue数组赋值非常简单。只需在合适的生命周期钩子函数或方法中发起AJAX请求，并将返回的数据赋值给Vue实例的数组即可。

除了前面介绍的方式外，还可以使用Vue的computed属性来实现类似的效果。computed属性可以根据依赖的数据动态计算出一个新的值，而无需手动赋值。下面是一个使用computed属性的例子：

// HTML
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
// JavaScript
var app = new Vue({
el: '#app',
data: {
rawData: []
},
computed: {
items() {
// 将rawData处理成items
return this.rawData.map(function(item) {
return item.name;
});
}
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
var self = this;
// 发起AJAX请求
axios.get('/api/items')
.then(function(response) {
self.rawData = response.data;
})
.catch(function(error) {
console.log(error);
});
}
}
});

在上面的例子中，我们新增了一个rawData数组，用于存储从服务器端获取的原始数据。然后，我们在computed属性中定义了一个items方法，用于将rawData处理成要展示的数据。这样，只要rawData发生变化，items就会重新计算。

通过以上两种方式，我们可以方便地使用AJAX给Vue数组赋值，从而实现动态更新视图的效果。