在vue开发时，改变数组或者对象的数据，什么情况页面视图没有更新？如何解决？

在 Vue 中，当修改数据时，页面视图不会立即更新，而是异步更新，因为 Vue 会对数据进行异步监听，并在数据变化时批量更新视图，这样可以提高性能。

但有一些情况下，Vue 无法监听到数据的变化，导致视图没有更新，这些情况包括：

1. 直接修改数组的某个元素，比如 `arr[0] = newVal`。

2. 直接修改对象的某个属性，比如 `obj.prop = newVal`。

3. 给数组赋一个新值，比如 `arr = [1, 2, 3]`。

为了解决这些问题，Vue 提供了一些响应式的 API，你可以使用这些 API 来修改数组或对象的数据。比如：

1. 使用 `$set` 方法来修改数组中的元素，比如 `this.$set(arr, 0, newVal)`。

2. 使用 `Vue.set` 方法来修改对象的属性，比如 `Vue.set(obj, 'prop', newVal)`。

3. 使用 `splice` 方法来修改数组，比如 `arr.splice(0, arr.length, ...newArr)`。

另外，还可以通过深度监听对象来解决问题，可以使用 `Vue.set` 方法或者使用 `Object.assign` 方法来深度复制对象。这样，当修改对象中的属性时，Vue 会自动更新视图。

相关问题

vue数据改变后而视图不更新有哪几种情况及解决方式？

Vue数据改变后视图不更新的情况有以下几种：

1. 直接修改数组某个下标的值，Vue无法监测到该变化，因为Vue会在初始化时劫持数组的一些方法来监听数组变化，如push、pop、shift、unshift、splice、sort、reverse等，而直接修改数组的某个下标的值并不是这些方法，所以Vue无法感知到变化。

解决方式：使用Vue提供的变异方法来修改数组，如$set、splice等。

2. 对象属性添加或删除时，Vue也无法检测到变化，因为Vue只劫持了对象已有的属性。

解决方式：使用Vue提供的$set方法来添加属性，使用Vue提供的$delete方法来删除属性。

3. 多个组件共享同一个数据源，如果一个组件修改了数据，但是其他组件没有更新，这是由于Vue的组件实例是独立的，它们都有自己的状态，修改一个组件的状态并不会影响其他组件的状态。

解决方式：使用Vuex来进行全局状态管理，或者使用事件总线来进行组件之间的通信。

4. 在生命周期钩子函数中直接修改数据，由于Vue的异步更新机制，在生命周期钩子函数中修改数据可能会导致视图无法及时更新。

解决方式：在生命周期钩子函数中使用this.$nextTick方法，该方法会在DOM更新完毕后执行回调函数，确保视图已经更新后再进行数据的修改。

5. 在计算属性中修改数据，计算属性本质上是一个函数，当计算属性依赖的数据发生变化时，该函数会重新执行，如果在计算属性中修改数据，则会导致死循环。

解决方式：避免在计算属性中修改数据，如果必须要修改，可以使用watch监听该计算属性，然后在watch回调函数中进行修改。

vue2.0 在数组中添加对象视图不更新

Vue 2.0 中如果向数组中添加对象，但视图不更新，这是因为 Vue 数据绑定的原理是基于数组的变异方法（即：push、pop、shift、unshift、splice、sort、reverse）进行监测的。如果直接修改数组，Vue 就无法检测到更改并触发视图更新。

解决方法：使用变异方法或Vue.set()进行数组的更新操作。例如：

this.items.push({ message: 'new item' })

或者：

Vue.set(this.items, this.items.length, { message: 'new item' })

这样，就能保证视图的正确更新。