vue计算属性什么时候重新计算

Vue的计算属性是根据其依赖的响应式数据进行计算的。只要计算属性依赖的响应式数据发生改变，计算属性就会重新计算。

具体来说，当计算属性第一次被访问时，Vue会执行其计算函数，并将结果缓存起来。
当计算属性依赖的响应式数据发生变化时，计算属性会被标记为"dirty"，下次再访问计算属性时，Vue会重新执行计算函数，并更新缓存的结果。
如果计算属性依赖的多个响应式数据都发生变化，则每个相关的计算属性都会被重新计算一次。

需要注意的是，计算属性是惰性的，只有当计算属性被访问时才会进行计算，而且计算属性的结果会被缓存起来，直到其依赖的响应式数据发生变化才会重新计算。

另外，计算属性的结果是根据其依赖的响应式数据来进行计算的，而不是根据其他计算属性的结果来计算的。如果一个计算属性依赖于其他计算属性的结果，那么当其他计算属性的依赖发生变化时，该计算属性也会重新计算。

总结起来，Vue的计算属性会在其依赖的响应式数据发生变化时重新计算，而且计算属性是惰性的，只有当其被访问时才会进行计算。这使得计算属性在处理响应式数据时非常方便和高效。

Vue中的计算属性是一种基于依赖关系进行自动更新的属性。它会将依赖的响应式数据关联起来，并在依赖数据发生变化时自动重新计算。计算属性的重新计算时机如下：

1. 初始渲染：在Vue实例初始化时，计算属性会被计算一次以获取初始值。

2. 依赖数据变化：计算属性会监听依赖的响应式数据，当依赖数据发生变化时，计算属性会自动进行重新计算。

3. 计算属性被访问时：当计算属性被访问时，如果它的依赖数据没有发生变化，那么会直接返回上一次计算的结果，而不需要重新计算。

4. 依赖数据被修改：如果计算属性的依赖数据被修改，那么在下一次访问计算属性时，会重新计算。

5. 强制更新：通过调用Vue实例的$forceUpdate方法可以强制更新所有的计算属性，即使它们的依赖数据没有发生变化。

值得注意的是，计算属性是基于依赖关系进行更新的，所以它只会在依赖数据发生变化时才会重新计算。如果计算属性没有依赖的响应式数据，那么它不会自动重新计算，只有在计算属性被访问时才会计算一次。

计算属性是Vue.js提供的一种便捷的属性计算方式，它会根据所依赖的数据自动进行重新计算。那么，计算属性什么时候会重新计算呢？

1. 初始化阶段：
   在组件实例被创建时，计算属性会立即计算并返回结果。这是计算属性的第一次计算。

2. 计算属性所依赖的数据发生变化：
   当计算属性所依赖的数据发生变化时，计算属性会重新计算。Vue会追踪计算属性的依赖数据，并在数据变化时触发重新计算。

3. 计算属性被使用时：
   当计算属性被使用时，会立即执行计算，如果计算属性所依赖的数据没有发生变化，则会直接返回上一次的计算结果，否则会重新计算并返回最新的结果。

值得注意的是，计算属性的计算结果会被缓存起来，只有在计算属性所依赖的数据发生变化时，计算属性才会重新计算。这样做的目的是为了提高性能，避免不必要的计算。

下面通过一个示例来进一步说明计算属性何时重新计算：

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="updateFirstName">更新firstName</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    updateFirstName() {
      this.firstName = 'Jane'
    }
  }
}
</script>

在上述示例中，当页面首次加载时，计算属性fullName会根据firstName和lastName的值进行计算，并将结果显示在页面上。此时计算属性的计算结果为'John Doe'。

当点击按钮更新firstName时，由于计算属性所依赖的firstName发生了变化，计算属性fullName会重新计算，将计算结果'Jane Doe'显示在页面上。

总结：计算属性会在初始化阶段进行一次计算，然后在计算属性所依赖的数据发生变化或计算属性被使用时进行重新计算。这样可以确保计算属性的结果是实时的且高效的。