vue计算属性什么时候执行

Vue 的计算属性会在以下情况下执行：

1. 当计算属性所依赖的响应式数据发生变化时，计算属性会立即重新求值。这就意味着，当计算属性依赖的响应式数据发生变化时，计算属性会重新执行其定义的函数，并返回新的计算结果。

2. 计算属性是惰性求值的。这意味着只有在依赖的响应式数据被访问时，计算属性才会被求值。换句话说，在模版中使用了该计算属性，或者在 JavaScript 代码中访问了该计算属性，才会触发计算属性的求值。如果计算属性没有被使用，那么它是不会执行的。

3. 如果一个计算属性依赖的响应式数据发生变化，但是在计算属性求值时没有被使用，那么该计算属性不会重新求值。

总结起来，Vue 的计算属性在被访问时执行，并且会缓存计算结果。当依赖的响应式数据发生变化时，计算属性会立即重新求值，并将新的计算结果缓存起来。这样就可以在模版中轻松地使用计算属性，而不需要手动去更新计算结果。

Vue计算属性是响应式的。当其依赖的属性发生变化时，计算属性会重新计算，并返回新的值。计算属性只有在被访问时才会执行，而且会进行缓存，除非依赖的响应式属性发生改变，才会重新计算。

下面是计算属性执行的时机：

1. 初始化阶段：在组件刚创建的时候，计算属性会进行一次初始化，并返回初始的值。这时会执行计算属性的get方法。

2. 依赖属性发生改变：当计算属性所依赖的属性发生改变时，计算属性会进行重新计算。这时会再次执行计算属性的get方法，并返回新的值。

3. 计算属性被访问：当计算属性被访问时，会触发计算属性的get方法。如果计算属性之前已经计算过一次，并且依赖的属性没有发生改变，Vue会直接返回之前缓存的值，而不会重新计算。

4. 计算属性的依赖属性不可响应：如果计算属性依赖的属性不可响应，那么计算属性不会执行响应式更新。这时，计算属性只会在初始化时执行一次，并返回初始的值。

5. 计算属性方法给其他属性赋值：当计算属性方法被用于给其他属性赋值时，计算属性方法会立即执行，并将返回的值赋给相应的属性。

需要注意的是，计算属性只有在其依赖的响应式属性发生变化时才会重新执行，如果依赖的非响应式属性发生了变化，计算属性是不会重新计算的。

Vue的计算属性是一种可以基于数据的变化进行计算并返回新的数据的属性。理解Vue的计算属性何时执行有助于更好地使用和优化Vue的性能。

计算属性的执行时机有以下几种情况：

1. 初始化阶段：在组件创建的阶段，计算属性会被立即执行一次，用于初始化相关的计算值。

2. 依赖数据发生变化时：当计算属性内部所依赖的数据发生变化时，计算属性会被重新求值。

3. 计算属性被访问时：当计算属性被访问时，如果计算属性依赖的数据没有发生变化，那么之前的计算结果会被缓存并直接返回，而不会再次执行计算。

需要注意的是，计算属性是基于响应式系统工作的。如果计算属性所依赖的数据没有被用作渲染或监听触发更新，那么计算属性将不会被执行。Vue通过依赖追踪来自动追踪计算属性的依赖关系，确保计算属性能够正确地被更新。

计算属性在访问时是以普通属性的形式访问，而不是作为方法调用。这样可以提高代码的可读性，使得代码更加简洁和易于维护。

为了更好地理解计算属性在什么时候执行，可以通过以下示例代码来演示：

<template>
  <div>
    <p>{{ fullName }}</p>
    <p>{{ reversedFullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      console.log('Calculating fullName...');
      return this.firstName + ' ' + this.lastName;
    },
    reversedFullName() {
      console.log('Calculating reversedFullName...');
      return this.fullName.split('').reverse().join('');
    }
  }
};
</script>

在上面的代码中，当firstName和lastName发生变化时，计算属性fullName和reversedFullName会被重新计算。

当渲染该组件时，控制台将会打印出以下内容：

Calculating fullName...
Calculating reversedFullName...

当firstName或lastName发生变化时，将会重新触发计算属性的执行。

需要注意的是，虽然reversedFullName依赖于fullName，但是由于fullName的结果已经被缓存，所以对firstName和lastName的修改不会重新计算fullName，也就不会重新计算reversedFullName。这种缓存机制可以提高性能，避免不必要的重复计算。

综上所述，Vue的计算属性在初始化阶段、依赖数据变化和被访问时会被执行。通过合理使用计算属性，可以使代码更加简洁易读，同时也能提高性能。