vue 什么时候重新渲染

Vue 在以下几种情况下会重新渲染：

1. 数据变化：当 Vue 组件中的响应式数据发生改变时，Vue 会自动触发重新渲染。例如，当我们通过赋值或者方法修改了 data 中的数据，Vue 会检测到数据的变化并重新渲染相应的组件。

2. 视图依赖变化：如果一个组件依赖的响应式数据发生了变化，那么 Vue 会重新计算这个组件的依赖，并触发重新渲染。Vue 使用了虚拟 DOM，会通过比较新旧虚拟 DOM 的差异来最小化真实 DOM 的操作，从而提高性能。

3. 父组件重新渲染：当一个父组件发生重新渲染时，它所包含的所有子组件也会重新渲染。这是因为子组件的渲染是依赖于父组件的数据的。

4. 强制更新：我们可以通过调用组件实例的 $forceUpdate 方法来强制重新渲染组件。这个方法会跳过虚拟 DOM 的比较和最小化操作，直接触发重新渲染。

总的来说，Vue 在数据变化或者视图依赖变化时会重新渲染组件，以保持视图与数据的同步。但是 Vue 也会尽可能地优化性能，避免不必要的重新渲染操作。

Vue 会在以下几种情况下重新渲染：

1. 数据改变：当 Vue 实例中的数据发生改变时，Vue 会重新计算虚拟 DOM 树，然后进行比对，找出发生变化的部分进行更新。

2. computed 属性改变：当 computed 属性依赖的数据发生改变时，computed 属性会重新计算，触发重新渲染。

3. watch 属性监听到数据变化：当 watch 属性监听到的数据发生改变时，Vue 会执行 watch 对应的回调函数，可以在回调函数中执行一些自定义逻辑。

4. 父组件更新：当父组件发生重新渲染时，子组件也会跟着重新渲染。

5. 使用 forceUpdate 方法：Vue 提供了 forceUpdate 方法，可以手动触发组件的重新渲染。

需要注意的是，Vue 进行重新渲染的方式是通过 diff 算法，将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，找出差异然后只更新差异的部分，这样可以减少浏览器的渲染压力，提升性能。因此，在修改数据时，应尽量避免直接操作 DOM，而是通过修改 Vue 实例中的数据来触发重新渲染。

Vue在以下情况下会重新渲染：

1. 数据变化：当Vue实例中的响应式数据发生改变时，Vue会检测到这个改变，并且触发重新渲染。这是Vue实现数据驱动视图的核心机制之一。当数据变化时，Vue会通过Virtual DOM算法将变更应用到真实DOM上。

2. 调用方法：当在模板中调用Vue实例中定义的方法时，这个方法可能会对响应式数据进行修改，从而触发重新渲染。当方法中调用了this.$set()或者Vue.set()方法来增加响应式数据时，也会触发重新渲染。

3. 计算属性变化：当计算属性中的依赖数据发生改变时，计算属性会重新求值，从而触发重新渲染。Vue会自动追踪计算属性的依赖，当依赖变化时，Vue就会重新计算计算属性的值。

4. 监听器：当Vue实例中的watch选项监听的数据发生改变时，监听器函数会被调用，并且触发重新渲染。

5. 生命周期钩子：Vue实例的生命周期钩子函数中，比如mounted、updated等，都会在对应的阶段触发重新渲染。

6. 父组件重新渲染：当父组件重新渲染时，子组件也会重新渲染。

需要注意的是，Vue会在下一个事件循环中异步地进行重新渲染。这样做是为了提高性能，避免频繁地更新DOM。Vue会将多个数据变化合并成一个渲染更新，以提升性能。

另外，Vue也提供了一些优化技巧，比如使用v-once指令将某个元素渲染结果缓存起来，以后不再重新渲染；使用v-if和v-show指令来控制元素的显示与隐藏，从而减少不必要的重新渲染等。这些技巧可以根据具体需求进行使用，以提高性能和用户体验。