什么情况下 vue会再次渲染

Vue会在以下情况下再次渲染：

1. 数据发生改变：当Vue实例的响应式数据发生改变时，Vue会自动重新渲染相应的DOM。这是Vue的核心特性之一，通过数据驱动视图更新。

2. 组件内部状态改变：当Vue组件内部的状态发生变化时，Vue会重新渲染组件。这包括组件的props值变化、组件的data值变化、组件的computed属性值变化、组件的watch属性值变化等。

3. 父组件重新渲染：当父组件重新渲染时，它的子组件也会重新渲染。这是因为Vue使用了虚拟DOM的 diff算法，只会重新渲染发生变化的部分。

4. 使用了Vue的特殊指令或特殊生命周期钩子函数：例如，使用了v-if、v-for指令，或者在组件中使用了created、mounted等生命周期钩子函数时，更改相关数据会触发重新渲染。

5. 强制手动触发重新渲染：Vue提供了一些方法来手动触发重新渲染，如this.$forceUpdate()方法。当数据发生变化时，如果Vue没有自动触发重新渲染，可以使用这些方法来强制重新渲染。

总之，Vue会在数据发生改变、组件状态改变、父组件重新渲染以及使用特殊指令或特殊生命周期钩子函数时触发重新渲染。这些机制确保了Vue应用的高效更新和响应能力。

在以下情况下，Vue 会再次渲染：

1. 数据变化：Vue 是基于数据驱动的，当 Vue 实例的数据发生变化时，Vue 会自动重新渲染页面。Vue 通过劫持数据的方式来实现数据的双向绑定，当数据被改变时，Vue 会通知相关的依赖项进行更新，并重新渲染模板。

2. 组件属性更改：当一个组件的属性发生变化时，组件会被重新渲染。这可以是父组件通过属性传递给子组件的属性发生了变化，或者是组件内部的数据属性发生了变化。

3. 父组件重新渲染：当一个父组件重新渲染时，所有的子组件也会被重新渲染。这是因为父组件重新渲染会导致子组件的所依赖的属性发生变化，从而触发子组件重新渲染。

4. 手动调用强制更新：在某些情况下，我们可能需要手动调用 Vue 实例的 $forceUpdate 方法来强制组件重新渲染。这通常是在一些特殊场景下才会用到，比如在组件依赖的数据虽然没有变化，但是需要重新渲染组件。

5. 路由切换：当使用 Vue-router 进行路由切换时，切换到新路由组件会导致组件重新渲染。这是因为每个路由对应一个组件，当切换路由时，Vue 会销毁当前的组件并重新创建新的组件，从而触发重新渲染。

需要注意的是，Vue 会尽量减少不必要的重新渲染，以提高性能。Vue 使用了虚拟 DOM 技术，通过对比新旧虚拟 DOM 树差异的方式来更新页面，只渲染页面上真正发生变化的部分。因此，在 Vue 中发生重新渲染的频率通常比直接操作 DOM 的方式要少很多。

Vue在以下情况下会再次渲染：

1. 数据变化：当Vue实例中的数据发生变化时，Vue会检测到数据的改变，并自动重新渲染相关的视图。这是Vue响应式系统的核心特性。

2. 计算属性变化：当计算属性依赖的响应式数据发生变化时，计算属性会重新计算，从而触发视图的重新渲染。

3. 侦听器变化：当侦听器中的数据发生变化时，侦听器函数会被触发，并导致视图的重新渲染。

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

5. 使用Vue的强制更新方法：Vue提供了forceUpdate方法来强制执行组件的渲染，这个方法会跳过依赖追踪，强制重新渲染组件。

下面我们将分别从数据变化、计算属性、侦听器、父组件重新渲染和forceUpdate方法几个角度来介绍Vue的重新渲染。

一、数据变化

当Vue实例中的数据发生变化时，Vue会自动检测到数据的改变，并重新渲染视图。这一过程是通过Vue的响应式系统来实现的。Vue会对实例中的data选项进行劫持，当数据被修改时，会自动通知依赖该数据的视图进行更新。

具体的步骤如下：

1. 修改数据：通过直接赋值或者使用Vue提供的方法修改实例中的data选项的数据。

2. 触发setter：当数据被修改时，Vue会触发数据对象的setter方法。

3. 依赖追踪：setter方法会通知依赖该数据的Watcher进行更新。

4. 更新视图：依赖该数据的Watcher会将自己添加到异步更新队列中，并等待下一次事件循环执行更新。

5. 异步更新：在下一轮事件循环中，Vue会遍历异步更新队列，依次执行Watcher的更新操作，从而更新相关的视图。

二、计算属性变化

计算属性是Vue提供的一种根据已有数据计算得出的属性。当计算属性依赖的响应式数据发生变化时，计算属性会自动重新计算，并触发相关的视图更新。

具体的步骤如下：

1. 修改计算属性依赖的响应式数据：通过直接赋值或者使用Vue提供的方法修改相关的响应式数据。

2. 触发setter：修改响应式数据时，会触发数据对象的setter方法。

3. 依赖追踪：setter方法会通知依赖该数据的Watcher进行更新。

4. 更新视图：Watcher会将自己添加到异步更新队列中，并等待下一次事件循环执行更新。

5. 异步更新：在下一轮事件循环中，Vue会遍历异步更新队列，依次执行Watcher的更新操作，从而更新相关的视图。

三、侦听器变化

Vue提供了watch选项，用于监听指定数据的变化，一旦监听到指定数据发生变化，相关的侦听器函数将被触发。

具体的步骤如下：

1. 修改侦听器监听的数据：通过直接赋值或者使用Vue提供的方法修改侦听器监听的数据。

2. 触发setter：修改侦听器监听的数据时，会触发数据对象的setter方法。

3. 依赖追踪：setter方法会通知依赖该数据的Watcher进行更新。

4. 匹配侦听器：Watcher会判断是否匹配到侦听的数据，如果匹配到，将执行相关的侦听器函数。

5. 更新视图：侦听器函数可以直接修改数据，从而触发视图的更新。

四、父组件重新渲染

当父组件重新渲染时，其子组件也会跟着重新渲染。

具体的步骤如下：

1. 修改父组件的数据：通过直接赋值或者使用Vue提供的方法修改父组件的数据。

2. 触发setter：修改父组件的数据时，会触发数据对象的setter方法。

3. 依赖追踪：setter方法会通知依赖该数据的Watcher进行更新。

4. 更新视图：依赖该数据的Watcher会将自己添加到异步更新队列中，并等待下一次事件循环执行更新。

5. 处理子组件：Vue会递归遍历子组件，检查子组件是否需要重新渲染。

6. 子组件重新渲染：如果子组件需要重新渲染，将执行子组件的渲染函数，从而更新子组件的视图。

五、forceUpdate方法

Vue提供了forceUpdate方法，可以用于强制执行组件的重新渲染。使用forceUpdate方法会跳过依赖追踪，直接触发组件的更新操作。

具体的步骤如下：

1. 调用forceUpdate方法：通过调用组件实例的forceUpdate方法。

2. 修改组件实例的_dirty属性：forceUpdate方法会将组件实例的_dirty属性设置为true，表示该组件需要重新渲染。

3. 更新视图：组件实例会将自己添加到异步更新队列中，并等待下一次事件循环执行更新。

4. 异步更新：在下一轮事件循环中，Vue会遍历异步更新队列，依次执行组件的更新操作，从而强制重新渲染组件的视图。