vue什么时候重新render • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue在什么情况下重新render呢？

Vue的渲染过程主要分为两个步骤：数据变化时的响应式更新和虚拟DOM diff算法的重新渲染。在数据发生变化时，Vue会根据变化的数据进行响应式更新，更新数据所关联的视图。而在重新渲染时，Vue会执行虚拟DOM的diff算法，找出需要更新的部分并进行局部更新。

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

初始渲染：当Vue实例创建时，会根据模板进行初始渲染，将模板转化成虚拟DOM并插入到页面中。
数据变化：当Vue实例的数据发生改变时，Vue会在下一个事件循环中异步进行响应式更新。Vue使用了一种叫做“异步更新队列”的机制，将数据变化收集起来，等到下一个事件循环时再进行更新。这种机制可以有效地避免频繁的重复渲染。
手动调用：我们可以通过手动调用$forceUpdate()方法来强制重新render。这个方法会重新触发渲染，但不会触发组件的生命周期钩子函数。
父组件重新渲染：当Vue的父组件发生重新渲染时，子组件也会重新渲染。这是因为父组件重新渲染时，会重新传递props给子组件，触发子组件的重新渲染。

总结来说，Vue会在初始化渲染、数据变化、手动调用和父组件重新渲染时重新render。对于数据变化，Vue采用了异步更新机制，将数据变化收集起来，等到下一个事件循环时再进行更新，以提高性能。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，重新渲染会在以下几种情况下发生：

数据发生改变：当Vue实例的数据发生改变时，Vue将会自动重新渲染与该数据相关的部分。这是Vue的响应式系统的核心机制。Vue会检测数据的变化，并根据变化重新计算虚拟DOM，然后比较虚拟DOM的差异，最后将差异部分更新到真实DOM中。
Watcher监听器：在Vue中，可以使用Watcher监听器手动监测数据的变化，并在变化时执行相应的回调函数。当Watch监听到数据发生改变时，会通知Vue重新渲染。
Computed计算属性：在Vue中，计算属性是一种特殊的属性，它的值是根据其他响应式数据计算而来的。当依赖的数据发生改变时，计算属性会自动重新计算，并触发重新渲染。
watch监听：Vue中的watch选项可以用来监听特定数据的变化，并在变化时执行相应的回调函数。当被watch监听的数据发生改变时，会触发重新渲染。
强制重新渲染：有时候，我们可能需要强制触发重新渲染，而不是等待数据改变或监听器的触发。Vue提供了一个$forceUpdate方法，可以用来手动触发组件的重新渲染。

综上所述，Vue会在数据发生改变、监听器触发、计算属性更新、watch监听、以及手动强制更新的情况下进行重新渲染。这些机制保证了Vue的数据驱动视图的特性，让开发者更加高效地构建动态的用户界面。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，重新渲染（re-render）是指当数据发生变化时，Vue框架会根据新的数据重新计算虚拟DOM，并更新DOM树以展示更新后的内容。当然，并不是每个数据变化都会触发重新渲染，Vue内部会执行一些优化策略来减少重复渲染的情况。

那么，Vue什么时候会重新渲染呢？下面将从不同的角度详细讨论。

1. 数据变化引起的重新渲染

Vue的核心响应式系统会追踪每个组件的所有数据，并在数据变化时触发重新渲染。

1.1 响应式数据的变化

当Vue组件中的响应式数据发生变化时，Vue会进行重新渲染。

例如，在Vue的data选项中定义了一个变量message，在模板中使用了这个变量。当message发生变化时，Vue会重新计算虚拟DOM并更新DOM树，展示最新的message。

data() {
  return {
    message: 'Hello Vue!'
  }
}

// 响应式数据的变化
this.message = 'Hello World!';

1.2 组件props的变化

如果一个组件接收了父组件传递的props，并且这个props值发生了变化，那么Vue会重新渲染该组件。

<template>
  <div>{{ message }}</div>
</template>

// 组件props的变化
props: ['message'],

mounted() {
  this.$props.message = 'Hello World!';
}

1.3 计算属性的变化

当计算属性（computed property）内依赖的数据发生变化时，计算属性会重新计算，并且重新渲染相关的DOM节点。

<template>
  <div>{{ reversedMessage }}</div>
</template>

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

// 计算属性依赖的数据变化，触发重新计算和渲染
this.message = 'Hello World!';

2. 异步操作引起的重新渲染

在进行异步操作时，Vue也会根据异步操作产生的数据变化进行重新渲染。

2.1 Vue.nextTick

当使用Vue的$nextTick方法时，Vue会将回调函数推入一个异步队列中，在下一次DOM更新循环之后执行该回调函数，这时Vue已经完成了数据的重新渲染。

// 异步操作
setTimeout(() => {
  this.message = 'Hello World!';
  
  // 异步回调函数
  this.$nextTick(() => {
    console.log('DOM已经更新完成');
  });
}, 1000);

2.2 Promise

当Promise对象的状态改变时，也会触发Vue的数据重新渲染。

// 异步操作
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello World!');
  }, 1000);
})
.then((message) => {
  // 数据变化，触发重新渲染
  this.message = message;
});

3. 手动触发重新渲染

除了上述自动触发重新渲染的情况，Vue也提供了一些手动触发重新渲染的方式。可以使用Vue实例的$forceUpdate()方法来强制组件重新渲染。

methods: {
  update() {
    // 手动触发重新渲染
    this.$forceUpdate();
  }
}

总结起来，Vue会在数据变化、计算属性变化、props变化、异步操作以及手动触发重新渲染的情况下，自动处理重新计算虚拟DOM并更新DOM树，以展示最新的数据。这样，Vue保证了视图与数据的同步更新。

1年前 0条评论