在Vue2.0中，当你的应用程序数据发生变化时，Vue会自动进行视图的更新，这一过程被称为重新渲染。然而，由于JavaScript的某些特性，Vue无法自动检测到数组的某些特定变化，例如直接修改数组索引或添加/删除元素。在这样的情况下，你可能需要采取一些特殊的策略来确保视图能够正确更新。下面我们将详细讨论三种在Vue2.0中重新渲染数据的方法。
1. **使用Vue提供的数组方法**
Vue提供了变异数组方法，如`push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `sort()` 和 `reverse()`。这些方法会触发Vue的响应式系统，从而自动更新视图。例如，如果你想要在数组末尾添加一个元素，可以这样操作：
```javascript
this.items.push(newItem);
```
2. **使用`Vue.set`或`this.$set`**
当你需要直接修改数组某个索引或者向数组中添加新元素时，可以使用`Vue.set`或组件实例上的`this.$set`方法。例如，如果你有一个名为`items`的数组，你想更新索引为2的元素：
```javascript
Vue.set(this.items, 2, newValue);
```
或者在组件内部：
```javascript
this.$set(this.items, 2, newValue);
```
这样，Vue会创建一个新的响应式属性，并确保视图的更新。
3. **使用计算属性和`mapMethods`**
如果你的数据是通过计算属性处理的，那么改变计算属性的依赖值也会触发视图的更新。此外，可以利用`mapMethods`从Vuex store获取响应式的数组操作方法。例如，使用`mapMutations`，你可以将store中的mutation方法映射到组件的方法中：
```javascript
methods: {
...mapMutations(['addItem']),
addNewItem(item) {
this.addItem(item);
}
}
```
在这里，`addItem`是Vuex store中的mutation，当你调用`addNewItem`时，store中的状态会改变，进而触发视图的重新渲染。
4. **使用`$nextTick`**
有时候，我们可能在生命周期钩子（如`created`或`mounted`）中立即改变数据，但此时DOM可能还没有更新。在这种情况下，可以使用`$nextTick`确保在DOM更新之后执行代码：
```javascript
this.items = newItem;
this.$nextTick(() => {
// DOM已经更新，可以在这里执行依赖于DOM的操作
});
```
5. **使用`watch`**
如果你希望在数据变化时执行特定的逻辑，可以使用`watch`对象监听数据的变化。例如，监听`items`数组的变化：
```javascript
watch: {
items: {
deep: true,
handler(newItems, oldItems) {
// 处理新旧值的变化
}
}
}
```
添加`deep: true`可以实现深度监听，即使数组内部的对象或数组元素变化也能触发回调。
Vue2.0提供了多种方式来确保数据变化后视图能正确地重新渲染。理解并熟练运用这些方法，可以有效地避免在开发过程中遇到视图未更新的问题。在实际项目中，选择合适的方法取决于具体需求和场景。
